React中useEffect依赖images引发无限重渲染问题求助

React提示需为useEffect添加images依赖，但添加后会触发无限循环——因为每次调用setImages都会改变images的引用，进而重新执行useEffect，再次调用setImages形成循环。

核心解决方案 #

不要直接依赖state中的images，改用函数式更新获取最新状态，彻底摆脱对images的依赖：

• 使用setImages的函数式写法，React会自动传入当前最新的prevImages状态值，无需将images加入依赖数组
• 计算分页按钮显示逻辑时，基于最新状态和新请求的数据计算，避免引用外部images

修改后的代码 #

const App = () => {
  const [imageName, setImageName] = useState('');
  const [images, setImages] = useState([]);
  const [page, setPage] = useState(1);
  const [error, setError] = useState(null);
  const [status, setStatus] = useState(Status.IDLE);
  const [isShowBtn, setIsShowBtn] = useState(false);

  useEffect(() => {
    if (!imageName) {
      setStatus(Status.IDLE);
      setImages([]);
      setIsShowBtn(false);
      return;
    }

    if (imageName !== '' || page > 1) {
      setStatus(Status.PENDING);

      fetchImages(imageName, page)
        .then(({ data }) => {
          // 使用函数式更新获取最新的prevImages
          setImages(prevImages => {
            const newImages = prevImages.concat(
              data.hits.map(({ id, webformatURL, largeImageURL }) => ({
                id,
                webformatURL,
                largeImageURL,
              }))
            );
            return newImages;
          });

          // 计算是否显示按钮：总数据量 > 当前已有数据 + 新获取的数据量
          setIsShowBtn(data.totalHits > images.length + data.hits.length);
          setStatus(Status.RESOLVED);
        })
        .catch(error => {
          console.log(error);
          setError(error);
          setStatus(Status.REJECTED);
        });
    }
  }, [imageName, page]); // 无需添加images依赖

  const handleSearchSubmit = imageName => {
    setImageName(imageName);
    setPage(1);
  };

  const handleLoadMoreClick = () => {
    setPage(page => page + 1);
    setIsShowBtn(false);
  };

  return (
    <div className="app">
      <Searchbar onSubmit={handleSearchSubmit} />
      {status === Status.REJECTED && <p>Error: {error.message}</p>}

      <ImageGallery imageName={imageName} images={images} status={status} />
      {status === Status.PENDING && <Loader />}
      {isShowBtn && <Button onClick={handleLoadMoreClick} />}
    </div>
  );
};

关键修改点说明 #

1. setImages的函数式更新：通过prevImages参数获取当前最新的图片数组，直接在函数内拼接新数据并返回，避免依赖外部的images state
2. 分页按钮逻辑优化：用images.length + data.hits.length计算当前总数据量，对比data.totalHits判断是否显示按钮，无需引用拼接后的临时数组

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