Así que quiero mostrar una lista de directores en mi página mapeándolos a un
Obtengo la propiedad de los directores del objeto de la película y sé que está bien escrito porque puedo registrarlo y veo la matriz, el problema es cuando trato de verificar la longitud o mapearlo, la página falla y me dice "TypeError: movie.directors no está definido"
<div className="director"> <h3>DIRECTOR{movie.directors.length > 1 ? "S" : ""}</h3> {movie.directors.map((director) => ( <p key={director.credit_id}>{director.name}</p> ))} </div>si hago esto:
<h3>DIRECTOR{movie.directors ? "S" : ""}</h3>y comento que el mapeo de la página funciona bien. También noto que la página falla y me da el error.
El error ocurre solo si actualizo el ejemplo de la página, lo cambio de
<h3>DIRECTOR{movie.directors ? "S" : ""}</h3> {/* {movie.directors.map((director) => ( <p key={director.credit_id}>{director.name}</p> ))} */}a:
<h3>DIRECTOR{movie.directors.length > 1 ? "S" : ""}</h3> {movie.directors.map((director) => ( <p key={director.credit_id}>{director.name}</p> ))}y guarde el archivo sin actualizar la página, funciona bien y de la manera que quiero, pero si actualizo la página, ocurre el error
Creo que esto se debe a que su estado inicial es un objeto vacío, no tiene directores.
para que puedas hacer algo como:
const [movie, setMovie] = useState({ directors: [] })Entonces, los directores son una matriz vacía inicialmente
Una cosa para agregar aquí es que ahora es una buena opción agregar una empty array como initial state .
Razón
Está fetching películas y, mientras tanto, desea mostrar un loader como símbolo de carga, luego, en lugar de usar otra loading de variable de estado para mostrar esto, puede simplemente tener una condición if al devolver eso,
devolver películas === nulo? :
Además, si no tiene ningún elemento después de obtenerlo, ¿cómo podría indicar que no hay elementos en la lista, ya que ha tomado la lista como empty array en lugar de null ?
Solución
Se sugiere usar una null check todo el tiempo, como
{movie?.directors.map((director) => ( <p key={director.credit_id}>{director.name}</p> ))}o
{movie && movie.directors.map((director) => ( <p key={director.credit_id}>{director.name}</p> ))} o para mostrar <Loader/> durante la carga
{movie=== null ? <Loader/> : movie.directors.map((director) => ( <p key={director.credit_id}>{director.name}</p> ))} Todo esto solo generará contenido si está presente y evitará cualquier representación de contenido null o undefined