React中componentDidMount方法为何执行两次？

最常见原因：React 18开发环境的严格模式（Strict Mode） #

在React 18的开发环境中，Strict Mode会刻意重复调用部分生命周期方法（包括componentDidMount），目的是帮你检测代码中潜在的副作用问题。这种重复执行仅存在于开发阶段，生产环境打包后不会出现该现象。

你可以检查项目入口文件（比如index.js），看是否包裹了<React.StrictMode>：

ReactDOM.createRoot(document.getElementById('root')).render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

如果注释掉<React.StrictMode>后重新运行，componentDidMount就只会执行一次。

其他可能的排查方向 #

• 组件重复挂载：检查路由配置或父组件逻辑，是否存在组件被卸载后重新挂载的情况（比如路由切换触发重复渲染、条件渲染导致组件反复挂载/卸载）。
• 上下文（Context）异常更新：你使用了AuthContext，如果上下文的token等值在组件挂载前后发生突变，导致父组件重新渲染并触发当前组件的二次挂载，也会引发该问题。可以在componentDidMount中打印this.context，观察挂载前后的上下文变化。

避免重复请求的优化方案 #

即使是开发环境的Strict Mode导致的重复请求，也可以通过代码调整避免接口重复调用：

1. 添加请求状态标记，确保同一时间只有一个请求在执行：

state = {
  clients: [],
  isFetching: false,
};

fetchClients() {
  // 已有请求在执行时直接返回
  if (this.state.isFetching) return;
  
  this.setState({ isFetching: true });
  
  let requestBody = {
    query: `
      query{
        users{
          _id
          name
        }
      }
    `,
  };

  fetch("http://localhost:8000/api", {
    method: "POST",
    body: JSON.stringify(requestBody),
    headers: {
      "Content-Type": "application/json",
      Authorization: "Bearer " + this.context.token,
    },
  })
  .then((res) => {
    if (res.status !== 200) {
      throw new Error("Failed");
    }
    return res.json();
  })
  .then((resData) => {
    const clients = resData.data.users;
    this.setState({ clients: clients, isFetching: false });
    console.log(resData);
  })
  .catch((err) => {
    console.log(err);
    this.setState({ isFetching: false });
  });
}

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