React中setEmail状态更新正常，setPassword与setName赋值无效如何解决？

• React 状态更新是异步批量执行的，调用setPassword、setName后，状态不会在当前函数执行上下文内立刻生效，你打印和发请求时拿到的还是本次渲染周期的旧状态值。
• email 状态是在之前handleStart触发时就完成更新的，所以在handleFinish执行时已经是最新值，才会出现仅email取值正常的表现。

推荐直接用已获取的ref实时值提交，不需要依赖状态更新，修改handleFinish逻辑即可：

const handleFinish = async (e) => {
  e.preventDefault();
  // 直接取ref的实时值使用
  const inputPassword = passwordRef.current.value;
  const inputName = usernameRef.current.value;
  // 赋值状态用于后续其他逻辑（如果没有后续使用也可以省略set操作）
  setPassword(inputPassword);
  setName(inputName);
  try {
    // 用实时取到的input值发请求，不要用state里的旧值
    await axios.post(url, { email, name: inputName, password: inputPassword });
    history.push("/");
  } catch (err) { }
}

如果确实需要等待状态更新完成后再执行后续操作，可以新增useEffect监听状态变化：

// 监听name、password更新
useEffect(() => {
  const submit = async () => {
    if(name && password) {
      try {
        await axios.post(url, { email, name, password });
        history.push("/");
      } catch (err) {}
    }
  }
  submit()
}, [name, password, email, history])

const handleFinish = (e) => {
  e.preventDefault();
  setPassword(passwordRef.current.value);
  setName(usernameRef.current.value);
}

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