Estaba tratando de hacer un array.map que recurre a un objeto. Algunos objetos tienen una clave "last_paper" y otros no. Necesito pasar por todas las propiedades de este objeto y enviarlas a otro componente de React. Pero, no todos los objetos tienen la clave "last_paper", por lo que cuando pasa a través de la matriz, mi página se rompe y me envía este error 'No se puede desestructurar la propiedad porque no está definida'. Sé que el motivo del mensaje de error es la falta de la clave "last_paper" en algunos objetos, pero no sé cómo evitar este problema.
Mi componente RobotContainer, robots es mi matriz con objetos.
{robots.map((robot) => <RobotCard key={robot.id} robot={robot} />)}en mi componente RobotCard intento destruir algunos accesorios del robot, incluido el last_paper. last_paper también es un objeto y también necesito información de esto.
const { id, title, last_paper } = robot; const { paper } = last_paper;todavía en RobotCard trato de renderizar papel:
<h1> {paper} </h1>Pero algunos de los robots no tienen la clave last_paper, aparece el error en el título. Si no tengo la propiedad last_paper, solo quiero representar otro div, por ejemplo. ¿Me pueden ayudar a resolver este problema?
No intentes desestructurar algo que podría no existir. Parece que necesita usar la representación condicional: represente el <h1> si la propiedad existe y, de lo contrario, represente ese "otro div", en cualquier formato que esté buscando.
const { id, title, last_paper } = robot; // ... { last_paper ? <h1>{last_paper.paper}</h1> : <div>No paper</div> }Si funcionara renderizar un h1 vacío en tal situación, también podría hacer simplemente
const { id, title, last_paper } = robot; // ... <h1>{last_paper?.paper}</h1>Alguna opción sería proporcionar un valor predeterminado a last_paper al desestructurarlo:
const { paper } = last_paper ?? { paper: 'Some default value' }; or const { paper } = last_paper ?? {} // Would default to undefined{robots.map((robot) => <RobotCard key={robot.id} robot={robot} />)} envía el componente principal del objeto al componente secundario (RobotCard) si desea un objeto en el componente secundario, así que use accesorios . prueba este código:
primero: usa accesorios
const { id, title, last_paper } = **props.robot**;<br/> const { paper } = last_paper <h4>{paper}</h4>segunda opción
const { id, title, last_paper } = props.robot;<br/> const { paper } = last_paper || {} <h4>{paper}</h4>tercera opción si la segunda no funciona: -
const { id, title, last_paper } = robot; <h4>{last_paper?last_paper.paper:undefined}</h4>