如何让React组件仅发起一次接口请求，获取数据后停止重复拉取

问题根源 #

• 你把fetch请求直接写在了组件函数体内，React组件每次渲染都会完整执行一遍函数体的所有代码，请求成功后调用setUser更新状态会触发组件重渲染，重渲染又会发起新的请求，形成无限循环，所以页面上的user值会一直变化。
• 控制台打印两次是React18开发环境默认开启的严格模式特性，会在挂载阶段执行两次副作用逻辑，用来帮助开发者排查潜在问题，属于开发环境的正常表现。

解决方案 #

把请求逻辑放到useEffect钩子中，指定空依赖数组，就能保证请求仅在组件首次挂载完成后执行一次：

import { useState, useEffect } from 'react';
import './App.css';

function App() {
  const [user, setUser] = useState()

  useEffect(() => {
    const controller = new AbortController()
    fetch('https://api.randomuser.me/', { signal: controller.signal })
      .then(res => res.json())
      .then(data => setUser(data.results[0].gender))
      .catch(err => {
        if (err.name !== 'AbortError') console.error('请求异常：', err)
      })
    // 清理函数，组件卸载时中断未完成的请求，避免内存泄漏警告
    return () => controller.abort()
  }, []) // 空依赖数组：仅首次挂载执行一次

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

export default App;

修改后如果开发环境还是看到两次请求，属于严格模式的正常现象，生产构建后就只会发起一次请求，不会重复拉取数据。

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