useEffect/componentWillUnmount 触发但状态为空答案

【问题标题】：useEffect/componentWillUnmount fires but state is emptyuseEffect/componentWillUnmount 触发但状态为空
【发布时间】：2021-06-03 13:16:33
【问题描述】：

我有一个钩子组件，允许用户上传一组图像。我想以这样一种方式设置它，当组件卸载时，所有文件都上传到我的后端。

当前使用 useEffect 并返回一个函数作为 componentWillUnmount 替代品，但是当调用该函数时，它所需的状态（上传的文件集）为空，即空列表。有没有办法解决这个问题或更好的方法来做到这一点？我怀疑这是因为 stagedUploadedImages 的 useState 设置为一个空列表。 这不是从该组件中解除状态的选项。

  const [stagedUploadedImages, setStagedUploadedImages] = useState([]);

  const uploadStagedFiles = () => { 
// when this is reached by the useEffect method `stagedUPloadedImages` is empty list
    stagedUploadedImages.forEach((file) => {
      const formData = new FormData();
      formData.append("files", file);

      api.uploads.uploadWithNoAssociation(formData).then((response) => {
        console.log("ImageGallery: response: ", response);
      });
    });
  };


  useEffect(() => {
    return () => {
      uploadStagedFiles();
    };
  }, []);

  const handleUpload = (files) => {
      setStagedUploadedImages([...files]);
  };

【问题讨论】：

你在哪里打电话setStagedUploadedImages()？
我在添加图片逻辑中调用它
你应该使用useCallback()。
@BenM “提交”表单的按钮不在此组件中，它在父组件中。而且我不能只为这个组件在父级中制作特殊代码。
我相信这回答了你的问题：stackoverflow.com/questions/61956823/…

标签： reactjs use-effect

【解决方案1】：

解释：https://www.timveletta.com/blog/2020-07-14-accessing-react-state-in-your-component-cleanup-with-hooks/

const [stagedUploadedImages, setStagedUploadedImages] = useState([]);

const valueRef = useRef();

const uploadStagedFiles = () => { 
  valueRef.current.forEach((file) => {
    const formData = new FormData();
    formData.append("files", file);

    api.uploads.uploadWithNoAssociation(formData).then((response) => {
      console.log("ImageGallery: response: ", response);
    });
  });
};

useEffect(() => {
  valueRef.current = stagedUploadedImages;
}, [stagedUploadedImages]);

useEffect(() => {
  return () => {
    uploadStagedFiles();
  };
}, []);

其他信息：https://dmitripavlutin.com/react-hooks-stale-closures/

【讨论】：