为什么useEffect里更新状态会无限循环？

轩辕秀玲提问于 2026-02-10 12:36:24 阅读 19

框架

我在用useEffect做API请求时，按教程把依赖项设为空数组，但状态更新后页面一直刷新…

比如这样写：

useEffect(() => {
  fetchUsers().then(data => {
    setUsers(data);
  });
}, []);

然后在组件里用了users数据渲染列表，但页面卡死了，控制台没报错。如果把依赖项改成[users]，反而会无限循环，出现”Too many re-renders”错误。之前在类组件用componentDidMount没问题，换成Hooks就搞不定，到底哪里错了？

性能优化组件设计

我来解答赞 3 收藏

反馈

1 条解答

Designer°乙涵 Lv1

你这个情况我太熟悉了，刚用Hooks那会儿我也被坑过。

首先空依赖数组 [] 是对的，表示只在组件挂载时执行一次，相当于类组件的 componentDidMount。你页面卡死但没报错，大概率不是无限循环，而是请求数据后更新了状态，导致组件重新渲染——这是正常行为。但如果卡死，可能是你的 fetchUsers 本身有副作用，比如又触发了其他状态更新，或者API一直pending没返回，先检查下网络面板看请求是否完成。

真正会导致无限循环的是你后面说的把依赖写成 [users]。因为 useEffect 依赖 users，而你在里面调 setUsers 改变 users，每次更新都会重新触发这个 effect，于是不断请求、不断更新，直接爆栈，所以 React 报 "Too many re-renders"。

解决办法就是：API调用这种只需要执行一次的操作，就老老实实用空依赖数组 []，确保它只跑一次。如果真需要依赖某个变量，记得判断清楚会不会形成“改状态 → 触发effect → 改状态”的闭环。

还有个常见坑是：如果你的 fetchUsers 是在组件内部定义的函数，每次渲染都会重新创建，就算写了 []，也可能因为闭包问题拿不到最新数据。建议用 useCallback 包一下，或者直接在 useEffect 里内联请求逻辑。

简单粗暴版：

useEffect(() => {

  fetch('/api/users')

    .then(res => res.json())

    .then(data => setUsers(data));

}, []); // 就用空数组，别乱加依赖

这样就没问题。先确认是不是请求本身卡住了，而不是循环。

2026-02-10 13:03