Estoy trabajando en un proyecto que muestra un título de comida al azar y la imagen de esa comida. Tengo problemas para averiguar por qué los datos se muestran en la página solo una vez y una vez que actualizo la página, aparece el error "Error de tipo no detectado: la lista de recetas no está definida".
Esta es mi casa.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`; console.log(URL); function Home() { const [food, setFood] = useState({}); useEffect(() => { axios .get(URL) .then(function (response) { setFood(response.data); }) .catch(function (error) { console.warn(error); }); }, []); return ( <main> <Recipe recipeList={food} /> </main> ); } export default Home;y este es mi componente Recipe.js
import React from "react"; function Recipe({ recipeList }) { return ( <div className="recipeCard"> <h1>{recipeList.recipes[0].title}</h1> <img src={recipeList.recipes[0].image} alt="Food" /> </div> ); } export default Recipe;debe verificar si sus datos de food no están vacíos o son nulos, aquí un ejemplo:
<main> {food && <Recipe recipeList={food} />} </main>en primer lugar, debe cargar los datos en efecto de uso
useEffect(() => { const loadData=()=>{ axios .get(URL) .then(function (response) { setFood(response.data); }) .catch(function (error) { console.warn(error); }); } if(!food){ // just for dont load empty data -->setFood(response.data) loadData() } }, []);estás cargando datos vacíos cuando recargas la página
rn3w se me adelantó. El mensaje de error indica que la recipeList.recipes no existe, lo cual es correcto porque cuando se inicializa el componente Recipe , la Lista de recipeList ( food del componente Home ) se establece en {} .
los datos se muestran en la página solo una vez y una vez que actualizo la página, da un error...
¡El misterio para mí es por qué los datos se muestran en la página la primera vez! Parece que debería comenzar con el mensaje de error.