Necesito mapear una serie de novelas que un usuario ha guardado para generar tarjetas de información en cada novela. Cada vez que lo intento, la página no se carga y aparece "Error de tipo: no se pueden leer las propiedades de nulo (leyendo 'nombre'), intentando leer el nombre de la novela, etc. La consulta funciona perfectamente en el back-end, y estoy capaz de consolar el registro de todos los datos en el navegador, por lo que no estoy seguro de por qué me aparece "indefinido".
Descubrí que puedo representar datos desde el nivel de usuario, pero no desde el subnivel de "novelas". Entonces, ¿creo que el problema puede tener algo que ver con el mapeo?
Aquí está la consulta:
{ user { _id name novels { _id name author rank isComplete } } }Y código relevante del componente:
if (data) { user = data.user console.log(user.novels) } return ( <> <div className="row"> {user ? ( <> <h2>Your Novels:</h2> {user.novels.map((novel) => ( <div key={novel._id} className="col-sm-12 col-md-2 col-lg-2 card"> <p> {novel.name} < br /> <span className="card-subheader" >by</span> {novel.author} < br /> <span className="card-subheader">Rank:</span> {novel.rank} < br /> <span key={novel.isComplete}>{novel.isComplete}</span> </p> </div> ))} ) : null} </div> </> ); } Básicamente, puede representar user.name , por ejemplo, pero no user.novel.name
¡Cualquier ayuda sería muy apreciado! (Y esta es mi primera publicación, así que disculpas de antemano si me estoy perdiendo algo)
Parece que no es culpa de su código en la interfaz. Debe verificar user en la console . Puede que user.novels contenga objetos vacíos que causen un error al leer novel.name , como este:
{ user: { _id: ... name: ... novels: [ null or {}, // novel is null so reading novel.name cause the error. { _id: ... name: ... author: ... rank: ... isComplete: ... } ], ... } }Sin embargo, puede verificar esto en el frontend, pero técnicamente estos objetos vacíos no deberían estar en su respuesta desde el backend y deberían corregirlos.