为何React中useEffect传入空依赖数组仍执行两次？

API 探路者

2026-8-18

React useEffect 依赖为空数组却执行两次的原因与解决

核心原因：React Strict Mode

在开发环境中，React Strict Mode会主动重复调用useEffect（以及其他部分生命周期方法），目的是检测代码中潜在的副作用问题（比如意外修改原数据、非幂等操作）。这种重复执行仅存在于开发环境，生产环境下不会触发。

解决方式

临时关闭Strict Mode（调试场景）
找到项目入口文件（通常是index.js），移除<React.StrictMode>的包裹即可消除开发环境下的重复执行。但不建议长期关闭，因为Strict Mode能帮你提前发现隐藏的代码问题。

修正代码中的副作用问题
你的代码存在直接修改原数据的错误：incorrect_answers.push(...)会改变allQuestion的原数组，既违反React不可变数据原则，还可能引发意外重渲染；同时push方法返回的是数组长度，并非你需要的新数组，导致compeleteArray的值不符合预期。

修正后的代码：

useEffect(() => {
  // 通过扩展运算符创建新数组，避免修改原数据
  const completeArray = [
    ...allQuestion[questionIndex].incorrect_answers,
    allQuestion[questionIndex].correct_answer
  ];
  setAllOptions(completeArray);
  console.log(completeArray);
  console.log("running");
  console.log(
    "addCorrect:",
    completeArray,
    "allQuestion.correct_answer:",
    allQuestion[questionIndex].correct_answer
  );
}, []);