Tengo un problema con el renderizado condicional de React. Quiero renderizar un accesorio específico si está configurado, así que primero verifico si el accesorio existe y luego lo envío de lo contrario, genera 0, pero React tiene un problema al verificar si la variable existe cuando no está definida en la primera carga ...
number: props.dashboardCards[0].items.thisMonth[0].itemTitle ? props.dashboardCards[0].items.thisMonth[0].itemTitle : 0,Este es mi código. Quiero crear un objeto con un campo numérico y en ese campo quiero configurar este accesorio si existe, de lo contrario, 0. Y React sigue dándome un error:
TypeError: no se pueden leer las propiedades de undefined (leyendo 'itemTitle')
thisMonth probablemente esté vacío o indefinido. Puede usar el encadenamiento opcional para resolver esto:
number: props.dashboardCards[0]?.items?.thisMonth[0]?.itemTitle ?? 0, Ahora, si props.dashboardCards[0].items.thisMonth[0].itemTitle existe, el number será su valor, o será 0.
El operador de encadenamiento opcional (?.) le permite leer el valor de una propiedad ubicada en lo profundo de una cadena de objetos conectados sin tener que verificar que cada referencia en la cadena sea válida.
Obtenga más información sobre el encadenamiento opcional desde aquí .
El error dice que no hay itemTitle en la matriz thisMonth .
Si proviene de la API, debe esperar para obtenerlo. Simplemente puede verificar los props con console.log(props) y verificarlo antes de usar la notación de puntos para obtener el itemTitle .
¿También puede verificar un valor con encadenamiento opcional ? :
props?.dashboardCards[0]?.items?.thisMonth[0]?.itemTitleSignifica:
if(props){ if(dashboardCards[0]){ if(items){ if(thisMonth[0]){ props.dashboardCards[0].items.thisMonth[0].itemTitle } } } }