React 18 useEffect钩子重复发起两次数据请求问题求助

• 开发模式下StrictMode的影响
  React 18在开发环境（比如create-react-app创建的项目）默认开启StrictMode，这个模式会让组件挂载、卸载后再重新挂载一次，目的是帮你排查代码里的潜在副作用问题。你的useEffect用了空依赖数组，会在两次挂载时各执行一次，所以出现了两次请求。这个行为只在开发环境存在，打包到生产环境后就不会触发两次请求了。

• 优化你的代码逻辑
  你现在循环调用setNewTaskContent，每次都更新状态，效率很低，而且直接把<Task />元素存在状态里也不是React的推荐做法。正确的方式是先把接口返回的原始数据存在状态中，渲染的时候再遍历数据生成组件：

  // 先声明状态存储任务数据
  const [tasks, setTasks] = useState([]);
  
  useEffect(() => {
    const fetchTasks = async () => {
      const res = await fetch('http://localhost:8080/tasks');
      const data = await res.json();
      console.log(data);
      // 一次性设置所有任务数据
      setTasks(data);
    };
    fetchTasks();
  }, []);
  
  // 在渲染阶段生成Task组件
  return (
    <div>
      {tasks.map(task => <Task key={task.id} task={task} />)}
    </div>
  );
  

  这样既避免了多次更新状态，也符合React状态管理的最佳实践——状态里存原始数据，而非JSX元素。

• 开发环境临时屏蔽两次请求的方法
  如果你想在开发时暂时避免这个情况，可以找到项目入口文件（比如index.js或main.jsx），去掉包裹<App />的<StrictMode>标签。不过不建议长期这么做，因为StrictMode能帮你提前发现很多隐藏的代码问题。

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