我在 React 应用程序上显示我的 api 数据时遇到问题

Question

Im building a react app that fetches a random food data from spoonacular.com. Im trying to display the title name of the food on the page but it doesn't show up and also why does it keep fetching a bunch of different data as shown in the picture of the console.log even though I specified the number of data to fetch as 1 in the URL

This is my Home.js

import React, { useEffect, useState } from "react";
import axios from "axios";
import Recipe from "../components/Recipes";

const URL = `https://api.spoonacular.com/recipes/random?apiKey=${APIKey}&number=1`;

function Home() {
  const [food, setFood] = useState({});
  useEffect(() => {
    axios
      .get(URL)
      .then(function (response) {
        setFood(response.data);
        console.log(food);
      })
      .catch(function (error) {
        console.warn(error);
      });
  }, [food]);

  return (
    <main>
      <Recipe recipeList={food} />
    </main>
  );
}

export default Home;

and this is my Recipe.js component

import React from "react";

function Recipe({ recipeList }) {
  return (
    <div className="recipeCard">
      <h1>{recipeList.title}</h1>
    </div>
  );
}

export default Recipe;

and this is the picture of the console when I log the results fetched from the API (they're all different food datas but I only wanted to fetch 1 food data and display it on the page)

Answer 1

That's right, you get 1 random recipe, but useEffect works every time you update the food state, so you have an infinite loop. Just remove food from useEffect dependency. It's also better to check if recipeList exists so you don't get a missing title error This should work as expected: Home.js:

import React, { useEffect, useState } from "react";
import axios from "axios";
import Recipe from "../components/Recipes";

const URL = `https://api.spoonacular.com/recipes/random?apiKey=${APIKey}&number=1`;

function Home() {
  const [food, setFood] = useState(null);
  useEffect(() => {
    axios
      .get(URL)
      .then(function (response) {
        setFood(response.data);
        console.log(food);
      })
      .catch(function (error) {
        console.warn(error);
      });
  }, []);

  return (
    <main>
      <Recipe recipeList={food} />
    </main>
  );
}

export default Home;

Recipe.js:

import React from "react";

function Recipe({ recipeList }) {

  if(!recipeList) return <></>
  return (
    <div className="recipeCard">
      <h1>{recipeList?.title}</h1>
    </div>
  );
}

export default Recipe;