Reactjs 使用Axios和React显示多个文件的上载进度

我正在尝试在React应用程序中显示文件上载的进度

首先，我创建了这个函数来上传多个文件：

  const [files, setFiles] = useState([])
  const saveDocuments = () => {
    try {
      files.forEach((file) => {
        axios.post("/api/documents", formData, {
          let formData = new FormData();
          formData.append("attached_file", file);
          formData.append("name", file.name);
          headers: {
            "X-CSRFTOKEN": getCookie("csrftoken"),
            "Content-Type": "multipart/form-data",
          },
          onUploadProgress: (progressEvent) => {
            const percentCompleted = Math.round(
              (progressEvent.loaded * 100) / progressEvent.total
            );
            file.progress = percentCompleted;
            console.log(percentCompleted);
          },
        });
      });
    } catch (e) {
      console.log(e);
    }
  };

使用此代码，我可以在控制台中看到

percentCompleted

值

在我的渲染函数中，我尝试显示此进度值：

return(
  <ul>
    {files.map((file, index) => (
      <li key={index} >
        <div>{file.name}</div>
        <div>{file.progress} %</div>
      </li>
    ))}
  </ul>;  
)

返回(

{files.map（（文件，索引）=>(

{file.name}
{file.progress}%

))}
；
)

进度值不显示；但是react dev工具显示状态中的进度值

---

我想我没有正确更新

文件

对象的状态。我该怎么处理？谢谢你的帮助。

因此我找到了解决方案，我必须用一个新的键

progress

创建数组

文件的副本，该键的值为
percentCompleted

const saveDocuments = () => {
    try {
      files.forEach((file) => {

        axios.post("/api/documents", formData, {
          let formData = new FormData();
          formData.append("attached_file", file);
          formData.append("name", file.name);
          headers: {
            "X-CSRFTOKEN": getCookie("csrftoken"),
            "Content-Type": "multipart/form-data",
          },
          onUploadProgress: (progressEvent) => {
            const percentCompleted = Math.round(
              (progressEvent.loaded * 100) / progressEvent.total
            );
            // Create copy of file
            let newFile = file;
            // ... and set the progress
            newFile.progress = percentCompleted;
            // Create copy of files array
            let filesCopy = [...files];
            // Find the index of the file object
            let fileIndex = filesCopy.findIndex((el) => el.name === file.name);
            //... and replace the object with the new one containing the [progress] key
            filesCopy[fileIndex] = newFile;
            // Finally, update the state
            setFilesUploaded([...filesCopy]);
            file.progress = percentCompleted;
          },
        });
      });
    } catch (e) {
      console.log(e);
    }
  };

然后，render函数使用
progress
键返回包含对象的新数组：

return(
  <ul>
    {filesUploaded.map((file, index) => (
      <li key={index} >
        <div>{file.name}</div>
        <div>{file.progress} %</div>
      </li>
    ))}
  </ul>;  
)

返回(

{filesUpload.map（（文件，索引）=>(

{file.name}
{file.progress}%

))}
；
)
您没有在saveDocuments中设置任何状态。
文件
是我的状态数组（我上传了代码以表明这一点）。看起来您没有在任何地方更新文件状态。您需要在某个地方调用setFiles函数，以便实际更新状态。我已经解决了这个问题，直到我提出问题，我将很快发布我的解决方案