React中useEffect空依赖却无限循环？for与map写法差异解惑

你遇到的问题本质和for循环、map语法无关，而是状态更新方式和闭包捕获变量的差异导致的，结合提到的url依赖问题，具体拆解如下：

两种写法的典型差异 #

导致无限请求的for循环写法（常见错误） #

const [items, setItems] = useState([]);
// 注意：如果urls在组件内部定义，每次渲染都会生成新数组引用
const urls = ['/api/1', '/api/2'];

useEffect(() => {
  for (let i = 0; i < urls.length; i++) {
    fetch(urls[i])
      .then(res => res.json())
      .then(data => {
        // 直接使用当前渲染的items变量（闭包捕获的初始空数组）
        setItems([...items, data]);
      });
  }
}, []); // 空依赖数组

正常运行的map写法 #

const [items, setItems] = useState([]);
const urls = ['/api/1', '/api/2'];

useEffect(() => {
  urls.map(url => {
    fetch(url)
      .then(res => res.json())
      .then(data => {
        // 使用函数式更新，获取React内部的最新状态快照
        setItems(prevItems => [...prevItems, data]);
      });
  });
}, []);

为什么会出现差异？ #

1. 闭包捕获的状态快照问题 #

空依赖的useEffect只会在组件挂载时执行一次，它捕获的是组件第一次渲染时的items（空数组）：

• 错误的for循环写法中，每个异步请求完成后，都是基于这个初始空数组创建新数组（[...items, data]），导致每次更新后items变成[data1]、[data2]（而非累加的[data1, data2]）。这种频繁的状态更新会触发组件反复重渲染，如果urls变量每次渲染都生成新引用（比如组件内部定义的数组），React的依赖检查机制可能误判依赖变化，导致useEffect再次执行，最终无限调用服务器。
• 而map写法用了函数式更新（setItems(prev => ...)），它直接从React内部获取上一次的状态快照，不需要依赖闭包捕获的旧items变量，每次更新都是累加的，不会触发不必要的重渲染。

2. 关于url依赖的问题 #

如果你的urls是在组件内部定义的（比如const urls = [...]），每次组件重渲染时，这个数组都会创建新的引用。如果for循环写法中，ESLint的依赖规则自动添加了urls到依赖数组，而你手动改成了空数组，就会导致React的实际依赖和声明的依赖不一致，触发useEffect反复执行，无限请求服务器。
map写法之所以避开了这个问题，是因为函数式更新的状态更新逻辑不会导致频繁重渲染，即使urls有引用变化，也不会触发无限循环。

3. 语法本身不背锅 #

把for循环改成函数式更新，同样可以正常运行：

useEffect(() => {
  const urls = ['/api/1', '/api/2'];
  for (const url of urls) {
    fetch(url)
      .then(res => res.json())
      .then(data => {
        setItems(prev => [...prev, data]);
      });
  }
}, []);

解决建议 #

• 处理依赖前一次状态的更新时，始终使用函数式更新（setState(prev => ...)），避免闭包捕获旧变量的问题。
• 确保useEffect的依赖数组包含所有用到的外部变量：如果urls是props传入的，要添加到依赖中；如果是内部定义的，用useMemo包裹以保持引用稳定：

  const urls = useMemo(() => ['/api/1', '/api/2'], []);
  

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