Tengo "Error de tipo: no se pueden leer las propiedades de undefined (leyendo 'mapa')", aunque useState() se inicializa con array . El error ocurre solo en un componente. Otros componentes, que creo que también usan useState y useEffect de la misma manera, no se resuelven con este error.
import { useState, useEffect } from "react/cjs/react.development"; import * as constants from "../../../../constants"; export default function Keywords(props) { const [movieKeywords, setMovieKeywords] = useState([]); useEffect(() => { const fetchKeywords = async () => { const data = await fetch( `${constants.TMDB_BASE_PATH}movie/${props.id}/keywords?api_key=${constants.API_KEY}` ); const jsonData = await data.json(); setMovieKeywords(jsonData.keywords); console.log("xdd"); }; fetchKeywords(); }, []); return ( <div className="flex flex-wrap"> {movieKeywords.map((keyword) => { return ( <div className="border font-oxygen m-1 rounded-xl cursor-pointer text-xs text-gray-300 px-2 py-1"> <p>{keyword.name}</p> </div> ); })} </div> ); }Estaré encantado si alguien pudiera señalarme en la dirección correcta.
Probablemente se haya equivocado por unos pocos ms en el momento de la llamada a la API y la representación. Una buena práctica es verificar la existencia de la matriz que está mapeando antes de intentar representar cualquier JSX. Establezca su estado inicial en nulo y realice un encadenamiento opcional en su línea de mapa.
Refactorice su componente algo como esto:
import { useState, useEffect } from "react/cjs/react.development"; import * as constants from "../../../../constants"; export default function Keywords(props) { const [movieKeywords, setMovieKeywords] = useState(); useEffect(() => { const fetchKeywords = async () => { const data = await fetch( `${constants.TMDB_BASE_PATH}movie/${props.id}/keywords?api_key=${constants.API_KEY}` ); const jsonData = await data.json(); setMovieKeywords(jsonData.keywords); console.log("xdd"); }; fetchKeywords(); }, []); return ( <div className="flex flex-wrap"> {movieKeywords?.map((keyword) => { return ( <div className="border font-oxygen m-1 rounded-xl cursor-pointer text-xs text-gray-300 px-2 py-1"> <p>{keyword.name}</p> </div> ); })} </div> ); } Observe movieKeywords?.map , esto no ejecutará el mapa hasta que movieKeywords no sea nulo, lo que significa que esperará hasta que se resuelva la búsqueda y se establezca su estado.
"jsonData.keywords no está indefinido". - El error en realidad te informa que sí lo es. setMovieKeywords(jsonData.keywords); actualiza el estado y luego movieKeywords no está definido y no puede acceder a una propiedad/método .map .
Por lo que veo, te falta props.id como una dependencia para useEffect y fetch . Parece que props.id inicialmente no es un valor válido para la solicitud de API y está recibiendo una respuesta de keywords indefinidas.
Solo debe realizar la solicitud de API si tiene todos los parámetros necesarios, y su código debe ser lo suficientemente robusto como para manejar respuestas potencialmente no válidas y malas.
props.id a la matriz de dependencias del gancho useEffect .fetch si la id es veraz.fetch .Ejemplo:
import { useState, useEffect } from "react/cjs/react.development"; import * as constants from "../../../../constants"; export default function Keywords({ id }) { const [movieKeywords, setMovieKeywords] = useState([]); useEffect(() => { const fetchKeywords = async (id) => { try { // <-- (3) use try/catch to handle rejected Promise or other exceptions const data = await fetch( `${constants.TMDB_BASE_PATH}movie/${id}/keywords?api_key=${constants.API_KEY}` ); const jsonData = await data.json(); if (jsonData) { // <-- (4) only update state if defined response value setMovieKeywords(jsonData.keywords); } } catch(error) { // handle any errors, log, set error state, ignore(?), etc... } console.log("xdd"); }; if (id) { // <-- (2) only fetch if `id` is truthy fetchKeywords(id); } }, [id]); // <-- (1) add `id` as dependency return ( <div className="flex flex-wrap"> {movieKeywords?.map((keyword) => { // <-- Use Optional Chaining in case `movieKeywords` becomes falsey for any reason return ( <div className="border font-oxygen m-1 rounded-xl cursor-pointer text-xs text-gray-300 px-2 py-1"> <p>{keyword.name}</p> </div> ); })} </div> ); }