如何在react中访问地图中另一个对象内部的对象

Question

react.js有时很复杂，我试图访问一个状态的信息，我有一个数组，里面有一个对象，在这个对象中，还有另一个对象叫price，在最后一个对象中，也有一个属性叫price。当我试图在map函数中获取这些信息时，代码会中断，这是我的地图代码：(错误行在******中)错误显示如下：未捕获类型错误：无法读取未定义的属性(读取"price")

products.map((item) => {
return (
<MainContainer onMouseEnter={() => onEnter(item.id)} key={item.id}>
<Card>
<TopContainer>
<p>163892</p>
<h2>{item.name}</h2>
<Icons>
<svg clip-rule="evenodd" fill-rule=</svg>
<InfoOutlinedIcon/>
</Icons>
</TopContainer>
<hr/>
<MidContainer>
<img src='https://cfarma-public.s3-sa-east-1.amazonaws.com/images/nexfar-product-default-image.jpg'/>
<div>
<p>Base</p>
****************************************<p>Nexfar<br/>R${item.price.price}</p>********************
</div>
<div></div>
<div></div>
<div></div>
<div></div>
</MidContainer>
</Card>
</MainContainer>
);
}) 

这张图显示了物体的结构

谢谢你们！

Answer 1

如评论所述，

问题是数组中的一个或多个元素没有.price.price属性，这将导致类型错误，因为它不存在。

要解决此问题，您可以执行item?.price?.price

可选的链接运算符(？.)使您能够读取位于连接对象链深处的属性的值，而无需检查链中的每个引用是否有效。

查看更多信息：https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Optional_chaining

Answer 2

const data = [{id:0, name:"alimazoya david", favourite:{color:"orange", laptop:"HP"}},{id:1, name:"scot phisah", favourite:{food:"green", place:"lagos"}}, {id:2, name:"pelumi fapunda"}];
export const Profile=()=>{

return(
<div>
{data && data.map(item=>{
return(
<div key={item.id}>
<div>{item.name}</div>
<div>{item?.favourite?.color}</div>
<div>{item?.favourite?.place}</div>
<div>{item?.favourite?.food}</div>
<div>{item?.favourite?.laptop}</div>
</div>
)
})}
</div>
)
}