React更新状态后发请求始终拿到旧值，用previousState也无效如何解决？

问题原因 #

React 的状态更新是异步批量执行的，不管你用普通写法还是带previousState的函数式更新写法，调用setUserSignup后不会立刻修改当前作用域下的userSignup变量，要等到当前同步代码执行完成、组件触发重渲染后，才会生成新的状态值。所以你在setUserSignup之后立刻调用POST接口，拿到的永远是本次函数执行时捕获的旧状态。

解决方案 #

你这个场景下最简单的优化方式是直接构造提交参数，不需要先更新状态再取值：

const signup = async (e) => {
  try {
    e.preventDefault();
    // 先构造要提交的新数据
    const newSignupData = {
      ...userSignup,
      user_firstname: refSignupFirstName.current.value,
      user_lastname: refSignupLastName.current.value,
      user_email: refSignupEmail.current.value,
      user_password: refSignupPassword.current.value,
    };
    // 同时用来更新状态和提交请求
    setUserSignup(newSignupData);
    const res = await POST(ENDPOINTS.USER_SIGNUP, newSignupData);
    console.log(res);
  } catch (err) {
    console.log("注册出错... : ", err);
  }
};

其他可选优化 #

• 如果你的表单是受控组件写法，可以直接给所有input绑定onChange事件实时更新userSignup，提交时直接用状态值即可，不需要额外用ref取输入值
• 不要混用async/await和then/catch，统一用try/catch包裹异步逻辑即可，避免逻辑混乱

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