React中REST API重复调用问题：如何避免重复请求？

问题原因 #

你遇到的两次请求是**React 18开发环境下严格模式（StrictMode）**的默认行为。StrictMode会刻意重复执行副作用（比如useEffect内的代码），目的是帮你提前发现代码里的潜在bug（比如内存泄漏、未正确清理的副作用），但生产环境下不会触发这个重复执行逻辑。

解决办法 #

1. 临时关闭严格模式（开发环境） #

找到项目根组件（通常是index.tsx或main.tsx）里的<StrictMode>标签，直接移除它，开发环境中useEffect就只会执行一次。不过不推荐长期这么做，因为严格模式能帮你提前规避很多问题。

2. 优化请求逻辑，避免无效重复请求 #

即使严格模式触发重复执行，我们可以通过AbortController取消重复的请求，避免不必要的网络开销，同时修正你代码里的类型错误：

// 先定义正确的用户类型
type User = {
  id: number;
  name: string;
  // 其他字段根据实际接口补充
};

export const App: React.FC = () => {
  // 状态类型改为数组，因为接口返回的是用户数组
  const [users, setUsers] = useState<User[] | undefined>();

  useEffect(() => {
    const controller = new AbortController();
    const signal = controller.signal;

    fetch('https://jsonplaceholder.typicode.com/users', { signal })
      .then((response) => response.json())
      .then((json) => setUsers(json))
      .catch((error) => {
        // 忽略取消请求的错误
        if (error.name !== 'AbortError') {
          console.error('请求失败:', error);
        }
      });

    // 清理函数：组件卸载或useEffect重新执行时取消请求
    return () => controller.abort();
  }, []);

  // 组件返回内容示例
  return (
    <div>
      {users?.map(user => <div key={user.id}>{user.name}</div>)}
    </div>
  );
};

3. 生产环境自动恢复正常 #

当你构建生产版本时，React会自动关闭严格模式的重复执行逻辑，这时请求只会发起一次，不需要额外修改代码。

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