从本地硬盘读取 JSON 文件并解析为 react 应用程序

Question

我正在尝试从用户选择或拖放的硬盘驱动器中读取 JSON 文件。我有点不确定它应该如何工作，而且我认为 FileReader.readAsText 是异步的这一事实存在问题。无论如何，制作了一个工作正常的拖放区组件，用户也可以选择一个文件。这是我的代码的相关部分：const DropZone = () => {  const [files, setFiles] = useState([]);  const [parsedFile, setParsedFile] = useState(null);  const onDrop = async (e) => {    e.preventDefault();    if (disabled) return;    setFiles([...e.dataTransfer.files]);    const fileReader = new FileReader();    await fileReader.readAsText(e.dataTransfer.files[0]);    fileReader.onload = (e) => {      setParsedFile(JSON.parse(e.target.result));    };    // e.dataTransfer.clearData();    // setDragging(false);  };  const renderHasFiles = () => {    // console.log('files: ', files);    return (      <Fragment>        <StyledIcon iconName="cloud_done" size="extraLarge" color={alertColors.SUCCESS} />        <div>Got em!</div>        <FileList>          <FileListHeader>            <TableHeader>File Name</TableHeader>            <TableHeader align="right">Size</TableHeader>          </FileListHeader>          <FileListContent>            {renderFileList()}          </FileListContent>        </FileList>        <ButtonContainer>          <ClearButton onClick={(e) => {e.preventDefault(); e.stopPropagation(); setFiles([]);}}>            Clear Files          </ClearButton>          <StyledButton onClick={(e) => { e.preventDefault(); e.stopPropagation(); submitButtonCallback(files, parsedFile); }}>            {submitButtonText}          </StyledButton>        </ButtonContainer>      </Fragment>    );  };  return (    <DropZoneContainer      width={width}      height={height}      disabled={disabled}      dragging={dragging}      onClick={() => openFileDialog()}      onDragOver={(e) => onDragOver(e)}      onDrop={(e) => onDrop(e)}    >      {files.length === 0 ? renderNoFiles() : renderHasFiles()}    </DropZoneContainer>  );};parsedFile 的控制台日志为空，但如果我在 onload 中设置调试器语句，我可以看到正在读取的文件的内容。为什么我无法获取文件的内容？

Answer 1

输入错误：

const [parsedFile, setParsedFile] = useState(null);

文件阅读器代码：

const fileReader = new FileReader();

fileReader.readAsText(e.dataTransfer.files[0]);

fileReader.onload = () => {

  setParsedFile(fileReader.result);

};

Answer 2

您正在尝试打印parsedFile，但在该状态下被调用parsedFiled。您还在onload回调设置状态之前打印值。尝试将打印移动到回调函数中。

该onload回调函数是asyncronous，所以你不能调用它，因为没有保证该功能已得到解决后，立即使用的值。为了使用文件内容，您可以执行以下操作之一： 将相关代码放在渲染函数中，以便它可以对状态变化做出反应；编写代码并插入回调函数中，以便在内容可用时调用；使用同步读取函数或将异步函数包装在承诺中，这样您就可以对它如何解决有预期（例如await承诺并在之后立即使用内容）。