如何訪問對象數組中的數組 React JS

Question

我正在將反應電子商務項目作為一個學習過程進行工作，並且陷入了一種情況，即我有一個包含多個訂單對象的訂單數組，並且在訂單內部有一個包含 orderItem 對象的 OrderItems 數組。

這里有兩個命令的Array結構供參考。

myOrders: [
  {
    id: 1,
    order_items: [
      {
        prod_id: 1,
        name: 123,
        qty: 1,
      },
      {
        prod_id: 1,
        name: 123,
        qty: 1,
      },
    ],
  },

  {
    id: 2,
    order_items: [
      {
        prod_id: 4,
        name: "xyz",
        qty: 2,
      },
      {
        prod_id: 5,
        name: "abc",
        qty: 5,
      },
    ],
  },
];

如何分別訪問所有訂單的 order_items？ 到目前為止我嘗試過的是：使用 useSelector 從 reducer 中檢索 myOrders，然后對其進行解構以獲取 order_items 並使用

order_items.map()

function，但它會拋出一個錯誤說

找不到未定義的 map

我正在學習 React JS，還不是專家。 非常感謝所有專家提供的任何幫助。

提前致謝

Answer 1

您可以在 myOrders 數組上嘗試map function 以檢索 order_items 並將這些平面檢索到 1 個單個數組中

 let myOrders = [ { id: 1, order_items: [ { prod_id: 1, name: '123', qty: 1 }, { prod_id: 1, name: '123', qty: 1 } ] }, { id: 2, order_items: [ { prod_id: 4, name: 'xyz', qty: 2 }, { prod_id: 5, name: 'abc', qty: 5 } ] } ]; let result = myOrders.map(i => i.order_items).flat(); console.log(result);

Answer 2

 const myOrders = [{id:1,order_items:[{prod_id:1,name:123,qty:1},{prod_id:1,name:123,qty:1}]},{id:2,order_items:[{prod_id:4,name:"xyz",qty:2},{prod_id:5,name:"abc",qty:5}]}]; const out = myOrders.reduce((a, b) => { a.push(...b.order_items); return a; }, []); console.log(out);