我的 Api 数据未显示在我的 React 应用程序上

Question

Im making a project where I fetch an image of a recipe card from https://spoonacular.com and I want it displayed on my react.js app. For some reason I can't get the API data from displaying on the page when I run it. Please help Im really stuck

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/4632/card?apiKey=${APIKey}`;

function Home() {
  const [food, setFood] = useState();

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

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

export default Home;

and this is my Recipe.js

import React from "react";

function Recipe({ recipeList }) {
  return (
    <section className="RecipeCard">
      <div
        className="Recipe"
        dangerouslySetInnerHTML={{ __html: recipeList }}
      />
    </section>
  );
}

export default Recipe;

Answer 1

You need to output the JSON as HTML for it to display.

For example, get a specific recipe : https://api.spoonacular.com/recipes/716429/information?includeNutrition=false

and in the Recipe Component div

<div className="Recipe">
    <div>{recipeList.title}</div>
    <img src={recipeList.image} />
</div>

Answer 2

 <section className="RecipeCard">
  {recipeList.map((recipe, index)=> (
    <div key={index} className="Recipe">
        <h2>{recipe.title}</h2>
   </div>
  ))}
</section>

Also, for code readability try to use async-await syntax for API call.

useEffect(()=> {
    const getRecipeList = async () => {
       if(food){
         try{
           const { data } = await axios.get(URL);
           setFood(data);
         }catch(error){
           console.log(error);
         }
       }
   }
  getRecipeList(); 
},[food]);