如何在反應中訪問地圖中另一個物件內的物件-有解無憂

react.js 有時很復雜，我試圖訪問一個狀態的資訊，我有一個陣列，里面有一個物件，在這個物件中，還有另一個名為 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>
                    );
                })

此圖顯示了物件結構的方式

謝謝你們！

uj5u.com熱心網友回復：

正如評論中所說，

問題是您的陣列中的一個或多個元素沒有 .price.price 屬性，這會導致型別錯誤，因為它不存在。

要解決這個問題，你可以這樣做item?.price?.price

可選的鏈接運算子 (?.) 使您能夠讀取位于連接物件鏈深處的屬性值，而無需檢查鏈中的每個參考是否有效。

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

轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/469992.html

標籤：反应字典目的

上一篇：如何迭代索引物件陣列

下一篇：將物件陣列作為元素添加到現有表td