0
219
VistasTengo problemas para mostrar mis datos de API en mi aplicación de reacción
Estoy creando una aplicación de reacción que obtiene datos aleatorios de alimentos de spoonacular.com. Estoy tratando de mostrar el nombre del título de la comida en la página, pero no aparece y, además, ¿por qué sigue obteniendo un montón de datos diferentes como se muestra en la imagen de console.log aunque especifiqué la cantidad de datos? para buscar como 1 en la URL
Este es mi 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;y este es mi componente Recipe.js
import React from "react"; function Recipe({ recipeList }) { return ( <div className="recipeCard"> <h1>{recipeList.title}</h1> </div> ); } export default Recipe; y esta es la imagen de la consola cuando registro los resultados obtenidos de la API (todos son datos de alimentos diferentes, pero solo quería obtener 1 dato de alimentos y mostrarlo en la página) 
1 Respuestas
Responde la pregunta0
Así es, obtienes 1 receta aleatoria, pero useEffect funciona cada vez que actualizas el estado de la food , por lo que tienes un bucle infinito. Simplemente elimine food de la dependencia useEffect . También es mejor verificar si existe la lista de recetas para que no obtenga un error de título faltante. Esto debería funcionar como se esperaba: 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;Receta.js:
import React from "react"; function Recipe({ recipeList }) { if(!recipeList) return <></> return ( <div className="recipeCard"> <h1>{recipeList?.title}</h1> </div> ); } export default Recipe;