useEffect 要么不给出结果，要么进入无限循环

Question

我真的很困惑useEffect。有时有效，有时无效。例如，

    const [news, setNews] = useState<Array<MainNewsData>>([]);
    useEffect(() => {
        getNews();
    }, []);
    const getNews = () => {
        NewsService.getMainNews() // calling an api
      .then((response: any) => {
        setNews(response.data);
      })
      .catch((e: Error) => {
        console.log(e);
      });
    };

得到React Hook useEffect has a missing dependency: 'getNews'. Either includes it or remove the dependency array如果我加上news就会进入一个无限循环。如果我使用useRef，因为我只想要一个渲染它的工作，但如果我试图传递结果给另一个类，会给我一个未定义的。我真的不明白的是，这段代码在以前的项目中工作，但在这里，甚至在阅读了很多关于如何使用useEffect获取数据的示例之后，我仍然没有找到解决方案。

我发现的一个答案是添加新闻。长度作为依赖项，但不推荐使用。

另一个是添加定时器:

我该怎么办?

Answer 1

用useCallback记忆getNews:

const getNews = React.useCallback(() => {
  NewsService
  .getMainNews()
  .then((response: any) => setNews(response.data))
  .catch(console.log)
}, []);

传递给useEffect依赖数组:

useEffect(() => {
  getNews();
}, [getNews]);

现在可以工作了，因为getNews总是相同的函数。在您的原始示例中，由于设置状态，它在每次渲染后重新创建。这导致了无限循环。

这个答案假设NewsService是从另一个文件导入的(或者至少在呈现周期之外声明)，看起来很可能是这样。