React.js应用加载两次致重复请求，如何解决？

问题原因 #

React 18的**严格模式（Strict Mode）**在开发环境下会自动执行两次空依赖的useEffect，模拟组件卸载后重新挂载的场景，目的是帮你检测潜在的副作用问题。你用useState标记执行状态的方式失效，是因为严格模式的重新挂载会让状态重置为初始值false，导致第二次useEffect又满足执行条件。

解决方案 #

方案1：使用useRef标记执行状态 #

useRef的current属性在组件整个生命周期中持久化，且更新不会触发组件重渲染，能完美解决严格模式下的重复执行问题：

import React, { useEffect, useRef } from 'react';
import './App.css';
import { handleData } from './components/Logger';

const App = () => {
  // 用ref标记是否已执行过
  const hasExecuted = useRef(false);

  useEffect(() => {
    if (!hasExecuted.current) {
      handleData();
      console.log("send Data to strapi from app");
      // 标记为已执行
      hasExecuted.current = true;
    }
  }, []);

  return (
    <div className="App">
      
    </div>
  );
}

export default App;

方案2：临时关闭严格模式（不推荐） #

如果只是想在开发环境临时避免这个现象，可以找到项目入口文件（通常是index.js），去掉包裹组件的<React.StrictMode>标签。但不建议这么做，因为严格模式能帮你提前发现内存泄漏、重复订阅等潜在问题。

补充说明 #

生产环境下React不会触发严格模式的重复执行逻辑，所以即使不修改代码，生产环境中handleData也只会执行一次。但开发阶段还是建议用方案1修复，避免不必要的请求干扰调试。

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