useEffect 一直循环到无穷大答案

【问题标题】：useEffects keeps looping for infinityuseEffect 一直循环到无穷大
【发布时间】：2023-02-07 21:41:54
【问题描述】：

如果这是一个愚蠢的问题，请原谅我。我是一个新的反应学习者。我正在尝试使用 create react 应用程序。我只使用自定义挂钩进行 API 处理。现在我希望 useEffect 仅在数据更改时运行。这就是为什么我把它放在依赖项中。但是它会一直渲染到无穷远。问题是什么？或者我该如何处理？谢谢。

import { useCallback, useEffect, useState } from "react";

export const useAPI = (url, options) => {
    const [data, setData] = useState([]);

    const getDogCollection = useCallback(() => {
        fetch(url, options)
            .then((res) => res.json())
            .then((result) => {
                console.log(data, "----DI---", result);
                setData(result);
            });
    }, []);

    useEffect(() => {
        getDogCollection();
    }, [data]);

    return data;
};

【问题讨论】：

标签： reactjs react-hooks usecallback react-usecallback

【解决方案1】：

您只希望 url 和 options 成为依赖项，而不是 data（因为您放它的效果！）。

import { useEffect, useState } from "react";

export const useAPI = (url, options) => {
  const [data, setData] = useState([]);
  useEffect(() => {
    fetch(url, options)
      .then((res) => res.json())
      .then(setData);
    // TODO: add error handling...
  }, [url, options]);
  return data;
};

但是，您可能只想查看swr 而不是自己编写此挂钩。

【讨论】：

【解决方案2】：

这是因为您已将数据作为依赖项之一提供，但 useEffect 中调用的函数会更新数据，因此它会再次运行。

您可以像这样将其更改为长度，它应该可以工作：

useEffect(() => {
    getDogCollection();
}, [data.length]);

【讨论】：

这将导致至少多抓一只狗。我认为这不是 OP 想要的。