React Hooks FileReader。警告：unstable_flushDiscreteUpdates：React 已经在渲染时无法刷新更新答案

【问题标题】：React Hooks FileReader. Warning: unstable_flushDiscreteUpdates: Cannot flush updates when React is already renderingReact Hooks FileReader。警告：unstable_flushDiscreteUpdates：React 已经在渲染时无法刷新更新
【发布时间】：2020-04-06 05:58:57
【问题描述】：

我尝试在选择文件后在 FileWidgetDropzone 上使用 FileReader。

我使用带有 onLoadCallback 的函数：

const readFile = (file: any, onLoadCallback: any) => {
    var reader = new FileReader();
    reader.onload = onLoadCallback;
    reader.readAsArrayBuffer(file);
  };

我使用 State 来存储 onLoadCallback 函数的结果数据（fileMetadata）：

 const [loadedFileReader, setLoadFileReader] = useState(false);  
 const [fileMetadata, setFileMetadata] = useState<IFileMetadata>(
    new FileMetadataValues()
  );
 const [files, setFiles] = useState<any[]>([]);

使用 readFile 并在 onLoadCallback 中更新状态的函数：

const getFileExif = (file: any) => {   
    setLoadFileReader(true);
    readFile(file, function(e: any) {     
      const data = ... e.target.result;
      if (data) {
        var model = new FileMetadataValues();
        ...
          setFileMetadata(model);
          setLoadFileReader(false);
        }
      }
    });    
  };

使用效果获取额外的文件数据

 useEffect(() => {
    if (files.length >0 && !loadedFileReader) {    
      getFileExif(files[0]);  
      return () => {
        files.forEach(file => URL.revokeObjectURL(file.preview));
      };    
    }
  }, [files]);


 return (
        <div>
          <FileWidgetDropzone
...

该组件每次都重新渲染，然后从 getFileExif 函数调用状态更改（总共 4 次）。

当我在返回之前放置 debugger;渲染。

请帮助为此示例开发更有效的解决方案。

【问题讨论】：

标签： reactjs react-hooks filereader use-effect

【解决方案1】：

使用 React Dropzone 时找到了解决方案。我使用 Promise。

父组件：

const [files, setFiles] = useState<any[]>([]);
const [filesMetadata, setFilesMetadata] = useState<any[]>([]);

子组件：

 const getFilesMetadata = (acceptedFiles: object[]) => {
    const files = [...acceptedFiles];
    parseMeta(files);
  };

 files.forEach((file: any) => {
      let promise = new Promise(resolve => {
        const reader = new FileReader();
        reader.onabort = () => console.log("file reading was aborted");
        reader.onerror = () => console.log("file reading has failed");
        reader.onload = () => {
        ...
        resolve(model);
        };
        reader.readAsArrayBuffer(file);
      });
      promises.push(promise);
    });
    Promise.all(promises).then((data) => {    
      setFilesMetadata(
        data.map((fileMeta: FileMetadataValues) =>
          Object.assign(fileMeta, fileMeta)
        )
      );
    });

 const onDrop = useCallback(
    acceptedFiles => {
      setFiles(
        acceptedFiles.map((file: object) =>
          ...
        )
      );      
      getFilesMetadata(acceptedFiles);      
    },
    [setFiles, getFilesMetadata]
  );

  const { getRootProps, getInputProps, isDragActive } = useDropzone({ onDrop });

【讨论】：