React中useEffect执行异常：重复触发引发重复注册等问题求助

问题1：useEffect触发两次 #

原因：你在App.js里用了<React.StrictMode>，React在开发环境下会刻意重复执行useEffect等生命周期函数，目的是检测潜在代码问题，这是StrictModeMode的默认行为，生产环境不会出现。

解决：

• 临时方案：开发阶段可暂时注释掉<React.StrictMode>标签，上线前再恢复。
• 正确方案：把注册请求从useEffect里移出来，改成用户点击注册按钮时触发——注册逻辑本就该是用户主动操作才执行，而非表单状态变化就自动发请求。

问题2：数据库出现重复用户 #

根本原因是useEffect触发两次导致发送了两次POST请求，即使数据库设了唯一约束，两次请求可能几乎同时到达，数据库还没完成唯一校验就都写入了。

解决：采用上面的正确方案，把请求绑定到按钮点击事件，确保只有用户主动点击才会发一次请求，彻底避免重复提交。

问题3：success字段逻辑不生效 #

原因：setMessage是异步更新React状态的，你在调用setMessage后立刻console.log(message)，拿到的还是更新前的旧值，导致if (message === "true")永远不成立。

解决：直接使用接口返回的response.data.success值做判断，不要依赖刚设置的message状态：

修改后的核心代码示例 #

// 移除原来的useEffect，新增点击事件处理函数
const handleRegister = () => {
  axios
    .post("/register", {
      fullname,
      username,
      email,
      password,
    })
    .then((response) => {
      const isSuccess = response.data.success;
      setMessage(JSON.stringify(isSuccess));
      
      // 直接用接口返回的success值判断，不用等状态更新
      if (isSuccess) {
        setOpen(true);
        setTimeout(() => {
          navigate("/signin");
        }, 3000);
      } else {
        // 不需要JSON.stringify，直接取键名即可
        setErrorMessage(Object.keys(response.data.msg.keyPattern)[0]);
      }
    })
    .catch((error) => {
      console.error("注册失败:", error);
      setErrorMessage("网络错误或服务器异常");
    });
};

// 注册按钮绑定点击事件
<button onClick={handleRegister} type="button">完成注册</button>

额外优化建议 #

• 可以在请求发送时添加loading状态，按钮点击后禁用，防止用户重复点击。
• 错误信息可做更友好的处理，比如把email转换成“邮箱已被注册”这类用户易懂的提示。

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