反应一次上传多个文件答案

【问题标题】：React upload multiple files at once反应一次上传多个文件
【发布时间】：2021-03-14 10:09:29
【问题描述】：

我有以下代码用于在我的 React 应用程序中上传多个图像。问题是console.log(e) 打印 Progress Event 对象及其所有值，但是当我想更新我的状态时，我仍然是默认值null, 0, []。我知道onload 是异步的，这可能是它们没有更新的原因。从技术上讲，当我一个一个上传文件时，代码正在工作。当我一次选择多个文件时，只显示第一个文件。我在这里做错了什么？

  const [fileUpload, setFileUpload] = useState(null);
  const [filesUploaded, setFilesUploaded] = useState([]);
  const [filesUploadedCount, setFilesUploadedCount] = useState(0);



  const handleFileUpload = (e) => {
    if (filesUploadedCount === 5 || e.currentTarget.files > 5) {
      return;
    }
    const files = e.currentTarget.files;
    console.log(files.length);
    console.log(e.currentTarget.files);
    Array.from(files).forEach((file: any) => {
      const reader = new FileReader();
      reader.onload = (e) => {
        console.log(e); // Progress Event {}

        setFileUpload(e.target.result);
        setFilesUploadedCount(filesUploaded.length + 1);
        setFilesUploaded([...filesUploaded, e.target.result]);

        console.log(fileUpload); // null
        console.log(filesUploaded); // []
        console.log(filesUploaded.length); // 0
        console.log(filesUploadedCount); // 0
      };
      reader.readAsDataURL(file);
    });
  };

我在这里展示它们。

                {filesUploaded?.map((file, index) => {
                    return (
                      <ItemImage
                        key={index}
                        src={file}
                        handleRemoveFile={handleRemoveFile}
                      />
                    );
                  })}

【问题讨论】：

标签： javascript reactjs typescript

【解决方案1】：

useState 也是异步操作，所以你不应该依赖它们的值来计算下一个状态。传递这样的函数。因此，您可能不会在 console.log 中看到。

setFilesUploaded(prevState => [...prevState, e.target.result]);

【讨论】：