Estoy haciendo un proyecto en React.js. Estoy mapeando la matriz y el error dice que la matriz no está definida incluso si existe
<ul> {details.extendedIngredients.map(ingredient => ( <li id={ingredient.id}>{ingredient.original}</li> ))} </ul>Código completo:
import { useEffect, useState } from "react"; import styled from "styled-components"; import { useParams } from "react-router-dom"; function Recipe() { let params = useParams(); const [details, setDetails] = useState({}); const [activeTab, setActiveTab] = useState("instructions"); const fetchDetails = async () => { const data = await fetch( `https://api.spoonacular.com/recipes/${params.name}/information?apiKey=${process.env.REACT_APP_API_KEY}` ); const detailData = await data.json(); setDetails(detailData); }; useEffect(() => { fetchDetails(); }, [params.name]); console.log(details.extendedIngredients); return ( <DetailWrapper> <div> <h2>{details.title}</h2> <img src={details.image} alt="" /> </div> <Info> <Button className={activeTab === "instructions" ? "active" : ""} onClick={() => setActiveTab("instructions")} > Instructions </Button> <Button className={activeTab === "ingredients" ? "active" : ""} onClick={() => setActiveTab("ingredients")} > Ingredients </Button> <div> <h3 dangerouslySetInnerHTML={{ __html: details.summary }}></h3> <h3 dangerouslySetInnerHTML={{ __html: details.instructions }}></h3> </div> <ul> {details.extendedIngredients.map(ingredient => ( <li id={ingredient.id}>{ingredient.original}</li> ))} </ul> </Info> </DetailWrapper> )} export default Recipe;Como se supone que setDetails guarda los detalles recibidos de su API en una matriz, supongo que debe inicializarse como una matriz vacía
const [details, setDetails] = useState({});
Como será una matriz vacía, no habrá procesamiento cuando el componente se monte desde reaccionar.
Debería ser: const [details, setDetails] = useState({});
editar estas tres partes:
primera parte:
useEffect(() => { fetchDetails().then(res=> {setDetails(res.data); console.log(res)} ); }, []);segunda parte:
<ul> {details?.extendedIngredients?.map(ingredient => ( <li id={ingredient.id}>{ingredient.original}</li> ))} </ul>tercera parte:
const fetchDetails = async (params) => { const data = await fetch( `https://api.spoonacular.com/recipes/${params.name}/information? apiKey=${process.env.REACT_APP_API_KEY}` return data; );