为什么我的自定义 useFetch 挂钩会导致无限循环？

Question

这是我用来在整个应用程序中获取数据的反应自定义挂钩。 当我使用这个钩子根据用户的输入查询获取数据时，我没有遇到问题。

使用Fetch.jsx

import React, { useState, useEffect } from "react";
import apiKey from "../apiKey";

function useFetch() {
  const [data, setData] = useState(null);
  const [error, setError] = useState(null);
  const [loading, setLoading] = useState(false);

  async function fetchData(
    url,
    options = {
      method: "GET",
      headers: {
        "X-RapidAPI-Key": apiKey,
        "X-RapidAPI-Host": "unogsng.p.rapidapi.com",
      },
    }
  ) {
    setLoading(true);
    try {
      const response = await fetch(url, options);
      const jsonData = await response.json();
      setData(jsonData);
    } catch (err) {
      setError(err);
    }
    setLoading(false);
  }

  return [data, error, loading, fetchData];
}

export default useFetch;

这是我的应用程序的主页。 我希望主页显示今天发布的最新节目。 我在尝试使用 useEffect 获取 API 时遇到了无限循环。

首页.jsx

import React, { useState, useEffect } from "react";
import useFetch from "../hooks/useFetch";

const Home = () => {
  const [newShows, setNewShows] = useState([]);
  const [data, error, loading, fetchData] = useFetch();
  const today = new Date();
  const date = today.toISOString().substring(0, 10);
  const url = `https://unogsng.p.rapidapi.com/search?newdate=${date}&limit=10`;
  console.log(date);

  useEffect(() => {
    fetchData(url);
    console.log(data);
  }, [data]);

  return <h1>Home</h1>;
};

export default Home;

我尝试使用 url 作为依赖项，但它没有在挂载时获取 API。

  useEffect(() => {
    fetchData(url);
    console.log(data);
  }, [url]);

它也没有依赖性。

  useEffect(() => {
    fetchData(url);
    console.log(data);
  }, []);

Answer 1

仅在组件挂载时获取数据； 所以对useEffect使用一个空的依赖数组。 （如果url可能发生变化，您可能希望将其放入依赖项数组中。）

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

然后，在 JSX 中有条件地显示数据：

return <>
  <h1>Home</h1>
  {data ? <pre>{JSON.stringify(data, null, 4)}</pre> : <p>Loading</p>}
</>;