Next.js V1中useState的setErrorF重复执行两次的解决方法

你的代码之所以会执行两次，核心原因有两个：

1. React Strict Mode 的行为：Next.js 默认开启 Strict Mode，它会刻意重复调用 setState 的更新函数、useEffect 等，用来帮你检测意外的副作用。你在 setErrorF 的回调里直接调用了 handleAlertinfo 这个弹窗逻辑，属于副作用，因此会被执行两次。
2. 无意义的状态更新：不管条件是否满足，你都返回了原 errorF 对象，这属于不必要的状态更新——状态没有变化，但 Strict Mode 依然会重复执行回调函数。

优化方案 #

1. 把副作用从 setState 回调中剥离

setState 的更新函数应该是纯函数，不要在里面执行弹窗、请求这类副作用。单独判断错误状态，再执行提示逻辑：

// 先判断是否存在表单错误
const hasErrors = errorF.FNameAndLName !== "" ||
                  errorF.phoneNumber !== "" ||
                  errorF.location1 !== "" ||
                  errorF.gender !== "" ||
                  errorF.methodeOfCourse !== "";

if (hasErrors) {
  handleAlertinfo("خطاها را بررسی کنید.");
  // 不需要更新状态就别调用setErrorF，避免无意义的重渲染
  return;
}

// 无错误时执行后续逻辑（比如表单提交）
// ...

2. 仅在状态真正变化时调用 setErrorF

如果需要更新 errorF（比如重置错误），只在状态确实改变时调用：

// 示例：重置所有错误提示
setErrorF({
  FNameAndLName: "",
  phoneNumber: "",
  location1: "",
  gender: "",
  methodeOfCourse: ""
});

完整的表单验证逻辑示例

const handleFormSubmit = () => {
  // 1. 完成表单字段的错误校验（假设你已经通过其他逻辑更新了errorF的各个字段）
  // 2. 判断是否存在错误
  const hasErrors = Object.values(errorF).some(val => val !== "");

  if (hasErrors) {
    handleAlertinfo("خطاها را بررسی کنید.");
    return;
  }

  // 3. 无错误时执行表单提交
  // ... 你的提交逻辑
};

关键总结 #

• 副作用（弹窗、网络请求等）不要放在 setState 的回调里，单独提取到状态判断逻辑中。
• 避免无意义的状态更新，只有当状态确实需要改变时才调用 setState，减少不必要的重渲染和重复执行。
• 接受 Strict Mode 的行为，它是帮助你提前发现代码问题的机制，确保你的副作用逻辑在重复执行时不会产生异常（比如弹窗两次）。

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