He publicado algo similar en el pasado y nunca obtuve una respuesta y sigo teniendo este problema. Las cosas en mi aplicación funcionan, pero no estoy muy seguro de por qué. Estoy usando una API de terceros para hacer una aplicación de recetas simple. Los datos que paso a mi componente se muestran como se esperaba, pero no se inicia sesión en la consola como se esperaba.
La línea 20 de App.js está registrando lo que esperaría (los datos recibidos de la API). La línea 4 de Recipe.jsx está registrando lo que esperaría (cada elemento en la matriz de recetas). Pero la línea 22 de App.js vuelve como indefinida. Esperaría que debido a que configuré Recetas en 'datos', esas 'recetas' registrarían lo mismo que 'datos'. ¿Puede alguien explicarme esto?

 import React, { useEffect, useState } from "react"; import "./App.css"; import Recipe from "./Recipe"; import axios from "axios"; function App() { const APP_ID = "XXXXXXXX"; const APP_KEY = "XXXXXXXXXXXXXXXXXXX"; const url = `https://api.edamam.com/api/recipes/v2?type=public&q=chicken&app_id=${APP_ID}&app_key=${APP_KEY}`; const [recipes, setRecipes] = useState([]); useEffect(() => { getRecipes(); }, []); const getRecipes = async () => { const res = await axios(url); const data = await res.data.hits; console.log(data); setRecipes(data); console.log(recipes); }; return ( <div className="App"> <form className="search-form"> <input className="search-input" type="text" /> <button className="search-button" type="submit"> Search Recipes </button> </form> {recipes && recipes.map((recipe, idX) => <Recipe recipe={recipe} id={idX} />)} </div> ); } export default App;

 import React from "react"; const Recipe = ({ recipe, id }) => { console.log(recipe); return ( <div key={id}> <h1>{recipe.recipe.label}</h1> <p>{recipe.recipe.calories}</p> <img src={recipe.recipe.images.SMALL.url} alt="" /> </div> ); }; export default Recipe;