useEffect 依赖数组导致无限循环答案

【问题标题】：useEffect dependency array causing infinite loop [duplicate]useEffect 依赖数组导致无限循环
【发布时间】：2021-07-25 08:54:29
【问题描述】：

我在控制台中收到以下警告： Line 19:6: React Hook useEffect has a missing dependency: 'data'. Either include it or remove the dependency array 和 res.data 在控制台记录时是一个空数组。

但是当我将 data 传递给依赖数组时，我确实在控制台中得到了正确的 API 响应，但我得到了一个无限循环。

根据我的阅读，这是使用 useEffect 时最常见的陷阱之一，但我仍然很难思考如何解决这个问题或找到我能真正理解的答案。

如果我的代码目前有什么问题以及如何解决，我们将不胜感激。

import { useState, useEffect } from 'react';
import { Link } from 'react-router-dom';
import axios from 'axios';

const apiKey = process.env.REACT_APP_NASA_KEY;

const NasaPhoto = () => {
  const [data, setData] = useState([]);

  useEffect(() => {
    const fetchData = async () => {
      const res = await axios(
        `https://api.nasa.gov/planetary/apod?api_key=${apiKey}`
      );
      setData(res.data);
      console.log(data);
    };
    fetchData();
  }, []);

  return (
    <div>
      <Link to='/'>Return Home</Link>
      <h1>Nasa Data</h1>
    </div>
  );
};
export default NasaPhoto;

【问题讨论】：

stackoverflow.com/questions/55840294/…
删除 console.log(data); 是否可以解决 lint 错误？
您的代码是正确的。警告只是一个警告，在这种情况下是误报。如果您想摆脱警告，请删除您的 console.log。

标签： reactjs use-effect

【解决方案1】：

在 useEffect 之外编写获取数据方法并在 useEffect 中调用它，然后将其作为依赖项传递你的代码现在应该是这样的 `

const fetchData = async () => {
      const res = await axios(
        https://api.nasa.gov/planetary/apod?api_key=${apiKey}
      );
      setData(res.data);
      console.log(data);
    };

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

【讨论】：

你可能想要改变它。这将导致无限循环，因为每次渲染都会重新创建 fetchData 函数，因此会触发 useEffect。
不会让题主去试试看，fetchData是依赖不是数据状态，如果是数据状态会导致死循环
每次运行渲染函数时都会创建您的 fetchData 函数。这将触发 useEffect，这将导致使用新获取的对象对 setData 进行新调用。并且组件将再次被渲染。并且将重新创建 fetchData 函数。并且 useEffect 将被触发。并且 setData 将被调用。并且渲染将运行。并且 useEffect 将触发。广告无限