React页面加载时API请求触发两次问题排查求助

根本原因 #

在React 18的严格模式下，开发环境中组件会被挂载两次，这是React官方的设计，目的是检测组件中潜在的bug（比如未正确清理的副作用）。你的useEffect依赖项为空数组，会在组件挂载时执行，因此在开发环境中会触发两次API请求，而生产环境下不会出现这个问题。

解决方法 #

• 关闭严格模式：若开发阶段想避免重复请求，可修改项目入口文件（通常是index.js或main.jsx），移除<StrictMode>对根组件的包裹：
  原代码：

  root.render(
    <StrictMode>
      <App />
    </StrictMode>
  );
  

  修改后：

  root.render(<App />);
  

• 忽略开发环境的重复触发：这是React 18开发环境的正常行为，生产环境会自动恢复单次执行，若不影响开发流程，可无需处理。

• 添加请求去重逻辑：如果担心重复请求带来的资源浪费，可给请求函数添加状态标记，避免重复执行：

  import React, { useEffect, useState } from "react";
  function App() {
    const [user, setUser] = useState([]);
    const [isLoading, setIsLoading] = useState(false);
  
    const fetchData = async () => {
      // 若正在请求则直接返回
      if (isLoading) return;
      setIsLoading(true);
      try {
        const response = await fetch("https://jsonplaceholder.typicode.com/users", {
          method:'GET',
          headers: {
            'Accept': 'application/json',
            "Content-Type": "application/x-www-form-urlencoded"
          }
        });
        const data = await response.json();
        setUser(data);
      } catch (err) {
        console.error("请求失败：", err);
      } finally {
        setIsLoading(false);
      }
    }
  
    useEffect(() => {
      fetchData();
    },[])
  
    return (
      <main> 
        <h1>User List</h1> 
        <ul> 
          {user.length > 0 && user.map((userObj) => ( 
            <li key={userObj.id}>{userObj.name}</li> 
          ))} 
        </ul> 
      </main>
    );
  }
  export default App;
  

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