Having trouble displaying api data on the page?-CodePudding

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. I keep getting the error that recipeList is undefined in Recipe.js but I thought it was defined?

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/716429/information?apiKey=${APIKey}&includeNutrition=false`;

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;

this is my Recipe.js

import React from "react";

function Recipe({ recipeList }) {
  return (
    <div className="Recipe">
      <div>{recipeList.title}</div>
      <img src={recipeList.image} />
    </div>
  );
}

export default Recipe;

CodePudding user response：

you need initializing empty

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

and in useEffect evaluate if food is empty

 useEffect(() => {
   const getData=()=>{
      axios
        .get(URL)
        .then(function (response) {
          const {data} = response;
          setFood(data);
        })
        .catch(function (error) {
          console.warn(error);
        });
     }
    if(!food){ // validate if food is empthy to get data (food)
        getData()
     }
  }, []); // here is not necesary use food, because never happen anything with that variable

CodePudding user response：

The response example can be seen here.

To call that using axios:

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

const URL = `https://api.spoonacular.com/recipes/716429/information?apiKey=${APIKey}&includeNutrition=false`;

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

    useEffect(() => {
        // You can add any if-else statement here
        // but you can also do the fetch without it
        axios
            .get(URL)
            .then(function (response) {
                setFood(response.data);
            })
            .catch(function (error) {
                console.warn(error);
            });
    }, []);

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

export default Home;

And based on the response, your Recipe.js should working properly.