如何在 JS 中遍歷嵌套對象

Question

我在 firebase 數據庫中存儲了一些訂單詳細信息，當我從中檢索數據時，它顯示如下所示。

Array [
  Object {
    "cartItems": Array [
      Object {
        "count": 1,
        "key": "1",
        "name": "EARRINGS",
        "pic": 20,
        "price": "200",
      },
      Object {
        "count": 1,
        "key": "2",
        "name": "Ring",
        "pic": 20,
        "price": "300",
      },
    ],
    "orderId": "OD4242JUL28",
  },
  Object {
    "cartItems": Array [
      Object {
        "count": 1,
        "key": "3",
        "name": "Staple",
        "pic": 20,
        "price": "400",
      },
      Object {
        "count": 1,
        "key": "2",
        "name": "Ring",
        "pic": 20,
        "price": "300",
      },
    ],
    "orderId": "OD4242JUL28",
  },
]

我可以通過在 [] 中使用索引來獲得第一個或第二個 object，但在那之后，如果我在其上使用 map function，我將無法對其進行迭代。 我想檢索每個 cartItem 並對其進行迭代以在訂單部分顯示它。

平面列表

<FlatList 
          data={this.state.order}
          keyExtractor={(item) => item.key }
          showsVerticalScrollIndicator={false}
          renderItem={({item}) =>(
            <View>
                <Image source={item.pic} style={{width:width/2.05,height:150}} />
                <Text style={styles.text}>{item.cartItems.name}</Text>
                <Text style={styles.text}>{item.orderId}</Text>
          </View>
          ) }
        />

這只返回 orderID 但item.cartItems.name返回任何內容。

Answer 1

@Lovepreet Singh 嘗試使用遞歸方法來迭代嵌套的對象數組。

Answer 2

不知何故，我想通了下面的代碼

<FlatList 
          data={this.state.order}
          keyExtractor={(item) => item.key }
          // numColumns={2}
          showsVerticalScrollIndicator={false}
          renderItem={({item}) =>(
            <View>
                <Image source={item.pic} style={{width:width/2.05,height:150}} />
                <Text style={styles.text}>{item.cartItems.keys}</Text>
                {item.cartItems.map(val=>{
                  return(
                  <View>
                    <Text> {val.count} </Text>
                    <Text> {val.price} </Text>
                    <Text> {val.name} </Text>
                    <Text> {val.pic} </Text>
                    </View> )
                })}
                <Text style={styles.text}>{item.orderId}</Text>
          </View>
          ) }
        />

它在 flatlist 中使用 map function 我相信這有一些錯誤，因為它給出了一個警告Functions are not valid as a React child. 請指導我執行此操作的最佳方法。