Javascript 如何使用useState，然后使用React中的最新状态执行函数？

我正在使用

useState

管理组件的状态。我需要创建状态，然后执行一个函数，用组件的状态调用API

我试着这样做：

const [uploadedFile, setUploadedFile] = useState(null);

const handleUpload = file => {
    const upload = {
      file: file[0],
      name: file[0].name,
      preview: URL.createObjectURL(file[0]),
      progress: 0,
      uploaded: false,
      error: false,
      url: null
    };
    setUploadedFile(upload);
    processUpload(file[0]);
  };

const processUpload = file => {
    const data = new FormData();

    data.append("file", file, file.name);

    api
      .put("/Private/user/documentupload", data, {
        onUploadProgress: e => {
          const progress = parseInt(Math.round((e.loaded * 100) / e.total));
          setUploadedFile({ ...uploadedFile, progress });
        }
      })
      .then(response => {
        console.log(response);
        setUploadedFile({
          ...uploadedFile,
          uploaded: true,
          url: response.data.identity.url
        });
      })
      .catch(error => {
        setUploadedFile({ ...uploadedFile, error: true });
      });
  };

但是，当调用

processUpload（文件[0]）

时，组件的状态为

null

（初始状态）。我尝试使用

useffect

：

const [uploadedFile, setUploadedFile] = useState(null);

  const handleUpload = file => {
    const upload = {
      file: file[0],
      name: file[0].name,
      preview: URL.createObjectURL(file[0]),
      progress: 0,
      uploaded: false,
      error: false,
      url: null
    };
    setUploadedFile(upload);
  };

  useEffect(() => {
    processUpload(uploadedFile.file);
  }, [uploadedFile]);

  const processUpload = file => {
    const data = new FormData();

    data.append("file", file, file.name);

    api
      .put("/Private/user/documentupload", data, {
        onUploadProgress: e => {
          const progress = parseInt(Math.round((e.loaded * 100) / e.total));
          setUploadedFile({ ...uploadedFile, progress });
        }
      })
      .then(response => {
        console.log(response);
        setUploadedFile({
          ...uploadedFile,
          uploaded: true,
          url: response.data.identity.url
        });
      })
      .catch(error => {
        setUploadedFile({ ...uploadedFile, error: true });
      });
  };

但这不起作用，因为当组件第一次渲染时，

uploadedFile

为空。我该怎么处理

提前感谢

编辑 从

handleUpload

开始上传：

const handleUpload=file=>{
常量上载={
文件：文件[0]，
名称：文件[0]。名称，
预览：URL.createObjectURL（文件[0]），
进展：0，
上传：错，
错误：false，
url:null
};
setUploadedFile（上传）；
processUpload（文件[0]）；
};

或者检查

upload.file

，而不仅仅是

upload

：

useffect（（）=>{
如果（上传文件）{
processUpload（uploadedFile.file）；
}
}，[uploadedFile&&uploadedFile.file]）；

在这种情况下，仅当文件实际更改时，才会重新触发。 但我可能只是从处理程序调用上载

旧答案：

在您的

useffect

中添加一个复选框：

const [uploadedFile, setUploadedFile] = useState(null);

  const handleUpload = file => {
    const upload = {
      file: file[0],
      name: file[0].name,
      preview: URL.createObjectURL(file[0]),
      progress: 0,
      uploaded: false,
      error: false,
      url: null
    };
    setUploadedFile(upload);
  };

  useEffect(() => {
    processUpload(uploadedFile.file);
  }, [uploadedFile]);

  const processUpload = file => {
    const data = new FormData();

    data.append("file", file, file.name);

    api
      .put("/Private/user/documentupload", data, {
        onUploadProgress: e => {
          const progress = parseInt(Math.round((e.loaded * 100) / e.total));
          setUploadedFile({ ...uploadedFile, progress });
        }
      })
      .then(response => {
        console.log(response);
        setUploadedFile({
          ...uploadedFile,
          uploaded: true,
          url: response.data.identity.url
        });
      })
      .catch(error => {
        setUploadedFile({ ...uploadedFile, error: true });
      });
  };

useffect（（）=>{
如果（上传文件）{
processUpload（uploadedFile.file）；
}
}，[uploadedFile]）；

编辑 从

handleUpload

开始上传：

const handleUpload=file=>{
常量上载={
文件：文件[0]，
名称：文件[0]。名称，
预览：URL.createObjectURL（文件[0]），
进展：0，
上传：错，
错误：false，
url:null
};
setUploadedFile（上传）；
processUpload（文件[0]）；
};

或者检查

upload.file

，而不仅仅是

upload

：

useffect（（）=>{
如果（上传文件）{
processUpload（uploadedFile.file）；
}
}，[uploadedFile&&uploadedFile.file]）；

在这种情况下，仅当文件实际更改时，才会重新触发。 但我可能只是从处理程序调用上载

旧答案：

在您的

useffect

中添加一个复选框：

const [uploadedFile, setUploadedFile] = useState(null);

  const handleUpload = file => {
    const upload = {
      file: file[0],
      name: file[0].name,
      preview: URL.createObjectURL(file[0]),
      progress: 0,
      uploaded: false,
      error: false,
      url: null
    };
    setUploadedFile(upload);
  };

  useEffect(() => {
    processUpload(uploadedFile.file);
  }, [uploadedFile]);

  const processUpload = file => {
    const data = new FormData();

    data.append("file", file, file.name);

    api
      .put("/Private/user/documentupload", data, {
        onUploadProgress: e => {
          const progress = parseInt(Math.round((e.loaded * 100) / e.total));
          setUploadedFile({ ...uploadedFile, progress });
        }
      })
      .then(response => {
        console.log(response);
        setUploadedFile({
          ...uploadedFile,
          uploaded: true,
          url: response.data.identity.url
        });
      })
      .catch(error => {
        setUploadedFile({ ...uploadedFile, error: true });
      });
  };

useffect（（）=>{
如果（上传文件）{
processUpload（uploadedFile.file）；
}
}，[uploadedFile]）；

你只需要在useEffect回调中添加一个if

if

在

useEffect

中不起作用，因为

processUpload

更改了对象，然后

useEffect

进入无限循环你只需要在useEffect回调中添加一个if

if

在

useEffect

中不起作用，因为

processUpload

更改了对象，所以

useffect

进入无限循环！我以前怎么不这么想？谢谢我将在10分钟内标记为已解决！所以，实际上这个实现是不起作用的

processUpload

被多次调用，因为每次调用时，对象都会更改，然后

useffect

调用

processUpload

again@OtavioBonder哦，我想那是你想要的，我编辑了我的回答天才！我以前怎么不这么想？谢谢我将在10分钟内标记为已解决！所以，实际上这个实现是不起作用的

processUpload

被多次调用，因为每次调用时，对象都会更改，然后

useffect

调用

processUpload

again@OtavioBonder哦，我想那是你想要的，我编辑了我的答案