Question

如何在 React 中的映射中访问另一个对象内的对象

2022-05-07

2192

reactjs dictionary object

react.js 有时很复杂，我试图访问一个状态的信息，我有一个包含一个对象的数组，在这个对象中，还有另一个名为 price 的对象，在最后一个对象中也有一个名为 price 的属性，当我尝试在 map 函数中获取此信息时，代码中断，这是我的 map 代码:(错误行在 ******) 错误显示如下：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>
                    );
                })

此图像显示了对象的结构

谢谢大家！

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>
)
}