React中useState设置状态后无法再次变更问题排查

你的代码有两个核心错误导致状态更新逻辑失效：

• 条件判断存在运算符优先级bug：!res.statusText === "OK"的执行逻辑是先对res.statusText取反得到布尔值，再和字符串"OK"做全等比较，布尔值和字符串永远不可能相等，这个判断永远返回false，你写的分支逻辑完全不会按预期执行。
• 没有捕获Axios的请求异常：当邮箱已注册时，服务端会返回4xx/5xx类错误状态码，Axios默认会对这类响应直接抛出Promise异常，你当前的代码没有异常捕获逻辑，错误场景下的状态设置代码根本不会执行，函数会直接中断，自然会出现状态设为某个值后无法变更的问题。

额外说明：你写的console.log(serverError)打印出旧值是React状态更新的正常特性，setState是异步批量更新的，调用状态更新方法后，当前函数闭包内的状态变量不会立刻同步变更，这不是bug。

1. 修正错误的条件判断写法，把!res.statusText === "OK"改成res.statusText !== "OK"
2. 给异步请求加try/catch块，捕获服务端返回的错误场景（比如邮箱已注册的409/400错误）
3. 可以新增状态存储具体错误文案，方便页面展示精准的提示信息
4. 每次发起注册请求前先重置错误状态，避免上一次的错误提示残留

修正后的完整代码如下：

const [serverError, setServerError] = useState(false);
const [errorTip, setErrorTip] = useState('');

const handleRegister = async ({ name, email, password }) => {
  const userdata = { name, email, password };
  // 提交前先清空上一次的错误状态
  setServerError(false);
  setErrorTip('');

  try {
    const res = await apiUrl.post("/users", userdata);
    if (res.statusText !== "OK") {
      setServerError(true);
      setErrorTip("注册请求异常，请稍后重试");
      return;
    }
    localStorage.setItem("token", res.headers["x-auth-token"]);
    // 此处写注册成功后的跳转、初始化用户信息等逻辑
  } catch (err) {
    setServerError(true);
    // 匹配邮箱已注册的错误场景，可根据你服务端的实际返回格式调整判断条件
    if (err.response?.status === 409 || err.response?.data?.message?.includes('邮箱已被注册')) {
      setErrorTip("当前填写的邮箱已被注册，请更换邮箱或直接登录");
    } else {
      setErrorTip("注册失败，请检查网络连接后重试");
    }
  }
};

页面渲染提示的示例代码：

{/* 错误提示 */}
{serverError && <div className="register-error">{errorTip}</div>}

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