React使用Axios发送关联请求时useState状态未及时更新问题咨询

• React 的状态更新是异步的，调用setDetails后无法在当前的函数闭包中立刻拿到更新后的details值
• 第二个文件上传请求没有等待第一个新增记录的请求执行完成就发起了，此时第一个请求的roundId还未返回
• 额外语法错误：原代码中第二个请求的URL直接把details.roundId写死成了字符串的一部分，没有做变量插值，就算拿到了roundId也无法正确拼接请求地址

推荐用async/await改写提交逻辑，代码可读性更高，也能避免异步回调嵌套的问题：

const FileUpload = () => {
  const [file, setFile]= useState(null)
  const[details, setDetails] = useState({
    consent:false, 
    idConfirmed:false, 
    label:"", 
    roundId:""
  })

  const changeHandler=(e)=>{
    setFile(e.target.files[0]);
    setDetails(prevDetails=>({
      ...prevDetails,
      consent:true,
      idConfirmed:true,
      label:"test_Label"
    }));
  };

  // 改为async异步函数
  const handleSubmission= async (e)=>{
    e.preventDefault();
    try {
      // 等待第一个新增记录请求完成，直接拿返回结果里的roundId
      const res = await axios.post(process.env.REACT_APP_URL_NEW_ROUND, details)
      const newRoundId = res.data.roundId
      console.log("获取到的roundId: ", newRoundId)

      // 如果业务需要更新state中的roundId可以保留这行，第二个请求直接用上面拿到的newRoundId即可，不需要等待state更新
      setDetails(prevDetails=>({
        ...prevDetails,
        roundId: newRoundId
      }))

      const data = new FormData();
      data.append("file", file)

      // 用模板字符串拼接请求地址，把newRoundId插入到路径中
      await axios.post(`${process.env.REACT_APP_URL_All_ROUNDS}/${newRoundId}/file/upload`, data)
      console.log("文件上传成功")
    } catch (e) {
      console.log("请求出错：", e)
    }
  };
}

如果你不想用async/await，也可以把第二个请求的逻辑全部放到第一个请求的then回调内部，直接用返回的res.data.roundId即可，不需要从state中取值。

内容的提问来源于stack exchange，提问作者Paddyd101