useEffects 不断循环

Question

如果这是一个愚蠢的问题，请原谅我。我是一个新的反应学习者。我正在尝试使用创建反应应用程序。我仅使用自定义挂钩进行 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;
};

Answer 1

您只希望

url

和

options

成为依赖项，而不是

data

（因为您在效果中 set 它！）。

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 而不是自己编写这个钩子。

Answer 2

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

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

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