React中更新Error状态后控制台打印空字符串问题排查

核心原因 #

React中useState的状态更新是异步的。当你调用setError("Test")后，React并不会立即更新error变量的值，而是将更新请求加入队列，等待下一次渲染时才会完成状态更新。所以在setError之后立刻执行console.log(error)，打印的还是更新前的初始值（空字符串）。

解决办法 #

方法1：直接打印目标内容

既然你已经明确要设置的错误信息是"Test"，可以直接打印这个字符串，不需要依赖state：

if (password != passwordConf) {
  const errorMsg = "Test";
  setError(errorMsg);
  console.log(errorMsg); // 直接打印变量，而非state
}

方法2：用useEffect监听状态变化

如果需要在error状态真正更新后执行操作（比如打印），可以使用useEffect监听error的变化：

import { useState, useEffect } from "react"; // 先导入useEffect

// ... 其他代码 ...

useEffect(() => {
  if (error) { // 当error有值时打印
    console.log(error);
  }
}, [error]); // 依赖error，状态变化时触发

const handleSubmit = async (e) => {
  e.preventDefault();
  if (password != passwordConf) {
    setError("Test"); // 这里不用再console.log
  } else {
    // ... 原有代码 ...
  }
};

额外优化提示 #

表单的提交按钮已经设置了type="submit"，可以直接通过Form的onSubmit事件绑定处理函数，不用在Button上绑定onClick，更符合表单默认行为：

<Form onSubmit={handleSubmit}> {/* 把onSubmit移到Form上 */}
  {/* ... 表单内容 ... */}
  <Button
    type="submit"
    variant="primary"
    className="w-100"
    {/* 移除onClick={handleSubmit} */}
  >
    Create account
  </Button>
</Form>

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