从本地硬盘读取 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 = () => {&nbsp; setParsedFile(fileReader.result);};

Answer 2

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