代码变更后useEffect持续重复请求数据，该如何解决？

云上老周

2026-8-13

解决代码变更时重复触发API请求的问题

先修复代码语法错误

你提供的useEffect代码存在语法错误：多余的逗号、缺少闭合括号，这会导致React无法正确识别依赖数组，可能引发异常渲染行为。修正后的代码如下：

React.useEffect(() => {
  fetch('https://api.themoviedb.org/3/discover/tv?api_key=172f725b29bb24b6e294a988fc5&language=en-US&sort_by=popularity.desc&include_adult=false&include_video=false&page=1&with_genres=16&without_genres=107%2C10759%2C99%2C80%2C35%2C10764%2C18%2C10751&with_watch_monetization_types=flatrate')
    .then(res => res.json())
    .then(data => console.log(data))
}, []); // 移除多余逗号，补充闭合括号

处理开发环境热更新导致的重复请求

开发环境中React的热模块替换（HMR）会在代码变更时重新加载组件，即便使用空依赖数组，也可能触发组件重新挂载，进而重复发起请求。可以通过以下方案优化：

缓存请求结果：用useState存储请求数据，仅当数据不存在时发起请求：

const [data, setData] = React.useState(null);

React.useEffect(() => {
  if (!data) {
    fetch('你的API地址')
      .then(res => res.json())
      .then(result => setData(result))
  }
}, [data]);

用useRef标记请求状态：通过useRef记录是否已经发起过请求，避免重复触发：

const Home = () => {
  const hasFetched = React.useRef(false);

  React.useEffect(() => {
    if (!hasFetched.current) {
      fetch('你的API地址')
        .then(res => res.json())
        .then(data => {
          console.log(data);
          hasFetched.current = true;
        });
    }
  }, []);

  return <div>Home组件内容</div>;
};