Después de importar los datos como json desde la página de detalles, en ProductDetail > brand > shoes > size.length obtengo la longitud que se genera en JSX.
Pero hay un problema. También hay productos sin datos de zapatos para cada producto detallado en la página de detalles. Quiero tratar los productos sin datos como 0 en lugar de la longitud como un operador ternario, pero no sé cómo manejarlo.
<p>{ProductDetail && ProductDetail.brand.shoes.size.length}</p> Pero aquí, los datos sin marca se usan usando el operador ternario. <p>0</p> : Quiero mostrarlo así.
Nike Air Force ProductDetail > brand > shoes > size > length(0,1,2,3,4,5,6) <p>{length}</p> jordan shoes ProductDetail > brand > shoes > size > length(0,1,2,3,4,5) <p>{length}</p> adidas shoes ProductDetail > brand > x -> Handles `<p>0</p>`.Si necesita mostrar 0 cuando un objeto es nulo o el objeto principal es nulo, pruebe algunos como a continuación
<p>{ProductDetail?.brand?.shoes?.size?.length || 0}</p> Básicamente con el uso de encadenamiento opcional y || operador, la salida será
ProductDetail is null/undefined ==> 0 ProductDetail.brand null/undefined ==> 0 .... ProductDetail.brand.shoes.size has valid array ==> length let ProductDetail = { brand: { shoes: { size: [2, 3] } } }; console.log(ProductDetail?.brand?.shoes?.size.length || 0); ProductDetail = null; console.log(ProductDetail?.brand?.shoes?.size.length || 0); ProductDetail = { brand: { shoes: null } } console.log(ProductDetail?.brand?.shoes?.size.length || 0);Puede usar un operador ternario y un encadenamiento opcional como este
<p>{ProductDetail?.brand?.shoes?.size?.length ? ProductDetail.brand.shoes.size.length : null}</p>