React组件中setState触发无限循环问题求助

问题根源 #

你现在的代码有两个核心问题：

1. 无限循环：组件每次渲染都会执行函数体里的循环代码，循环里调用setImages会触发组件重渲染，重渲染后又会再次执行循环，往复下去就造成了无限循环。
2. 状态不同步：arr是普通变量，每次组件重渲染都会重新声明为空数组；而且generateCat是异步请求，循环调用时请求还没返回，arr还是空的就调用了setImages，等请求返回后修改arr也不会触发组件更新，最终状态里的图片数据根本不对。

修复方案 #

用useEffect控制请求只执行一次，同时用Promise.all处理异步请求的并发，确保所有图片URL获取完成后再统一更新状态：

import { useState, useEffect } from 'react';

const CatGallery = () => {
  const [images, setImages] = useState([]);
  const [loading, setLoading] = useState(true);
  // 要获取的图片数量，对应原代码中cats数组的长度
  const targetCount = 3;

  // 封装请求函数，返回Promise以便后续处理
  const getCatImage = () => {
    return fetch(
      "https://api.thecatapi.com/v1/images/search?size=small&limit=1&mime_types=jpg,png&width=200&height=200"
    )
    .then(response => {
      if (!response.ok) throw new Error('请求失败');
      return response.json();
    })
    .then(data => data[0].url);
  };

  // 用useEffect确保只在组件挂载时执行一次请求逻辑
  useEffect(() => {
    const fetchAllCats = async () => {
      try {
        // 生成对应数量的请求Promise
        const requestPromises = Array.from({ length: targetCount }, getCatImage);
        // 等待所有请求完成，拿到所有图片URL
        const catImages = await Promise.all(requestPromises);
        setImages(catImages);
      } catch (err) {
        console.error('获取猫图出错:', err);
      } finally {
        setLoading(false);
      }
    };

    fetchAllCats();
  }, []); // 空依赖数组，仅组件挂载时执行一次

  // 渲染逻辑
  if (loading) {
    return <div>加载猫图中...</div>;
  }

  return (
    <div className="cat-gallery">
      {images.map((url, idx) => (
        <img 
          key={idx} 
          src={url} 
          alt={`可爱猫咪${idx + 1}`} 
          style={{ width: '200px', height: '200px', margin: '10px' }}
        />
      ))}
    </div>
  );
};

export default CatGallery;

关键优化点 #

• 避免无限循环：通过useEffect的空依赖数组，让请求逻辑只在组件第一次挂载时执行，不会随组件重渲染重复触发。
• 异步请求同步处理：用Promise.all并发发起所有请求，等全部请求完成后再更新状态，保证状态里的图片数据是完整的。
• 状态管理正确：不再用普通变量存储图片URL，直接通过useState维护状态，确保数据和视图同步。
• 错误与加载状态：增加loading状态提升用户体验，同时捕获请求错误避免程序崩溃。

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