如何在反应中访问地图中另一个对象内的对象答案

【问题标题】：How to access an object inside another object in a map in react如何在反应中访问地图中另一个对象内的对象
【发布时间】：2022-07-14 23:40:56
【问题描述】：

react.js 有时很复杂，我试图访问状态信息，我有一个数组，里面有一个对象，在这个对象中，还有另一个对象叫做 price，在最后一个对象中也是一个名为 price 的属性，当我尝试在地图函数中获取此信息时，代码中断，这是我的地图代码：（错误行在 ****** 中）错误显示如下this: Uncaught TypeError: Cannot read properties of undefined (reading '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>
                    );
                })

this image shows how the objects structure is

谢谢你们！

【问题讨论】：

错误是什么？
Uncaught TypeError: Cannot read properties of undefined (reading 'price') 这是错误
问题是数组中的一个或多个元素没有.price.price 属性。我不确定这是否有意，但您可以通过item?.price?.price 进行快速修复。
行得通！！！非常感谢@Basbas！你是一个救生员。

标签： reactjs dictionary object

【解决方案1】：

如 cmets 所述，

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

要解决这个问题，你可以这样做item?.price?.price

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

【讨论】：

【解决方案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>
)
}

【讨论】：