reactjs - 我需要执行一个函数，在使用 setState 钩子(Hook)后立即更新状态，但是函数内部的状态是空的？

Question

我正在尝试上传文件并在文件上传时显示进度，我正在做的是当用户从输入中选择文件时，我有一个 onChange 监听器，它将获取文件并使用具有 2 个字段文件和进度的对象构建一个新状态:

    const [files,setFiles] = useState([]);

    const handleFileUpload = async (e) => {
        const fileList = Array.from(e.target.files);
        const filesStructure = fileList.map((file: any) => ({
          progress: 0,
          file,
        }));

       const clonedFiles = [...files, ...filesStructure];
       setFiles(clonedFiles);
  
        filesStructure.forEach((fileItem) => {
          uploadFile(fileItem.file, post.id);
        });
      }
    e.target.value = "";
  };

现在在我的 uploadFile 中，我想更新每个文件的进度，但如果我检查那里，状态是一个空数组

    const uploadFile = async (file, postId: string) => {
        console.log("files are:", files);
        setIsLoading(true);
        const formData = new FormData();
        formData.append("file", file);
        formData.append("post_id", postId);
        try {
          const onprogress = (event) => {
               clonedFileItem.progress = Math.round((event.loaded * 100) / event.total);
               const clonedFiles = [...files];
               clonedFiles[index] = clonedFileItem;
               setFiles(clonedFiles);
          };

      const res = await uploadFileService(formData, onprogress);

    } catch (error) {
      console.log(error.message);
    } finally {
      setIsLoading(false);
    }
  };

我不太确定应该如何解决这个问题？我需要访问 uploadFile 和 onprogress 函数中的更新状态。

Answer 1

通常，您在这里使用了很多变量引用，这些引用在某些时候都会过时。

files 将在调用 uploadFile 时引用 files 数组。

在许多情况下，您可以通过使用回调符号来解决这个问题。

      const onprogress = (event) => {
           setFiles(oldFiles => {
             clonedFileItem.progress = Math.round((event.loaded * 100) / event.total);
             const clonedFiles = [...oldFiles];
             clonedFiles[index] = clonedFileItem;
             return clonedFiles
           }
      };