Question

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

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

据我所知，这是使用 useEffect 时最容易陷入的陷阱之一，但我仍然很难思考如何解决这个问题或找到我能真正理解的答案。< /p>

对于我的代码当前有什么问题以及如何解决的任何帮助，我们将不胜感激。

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;

Answer 1

在 useEffect 之外编写您的 fetch data 方法并在 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]);

`

useEffect 依赖数组导致无限循环

1 个答案: