如何访问对象数组中的数组 React JS答案

【问题标题】：How to access array inside an array of Objects React JS如何访问对象数组中的数组 React JS
【发布时间】：2021-06-07 09:32:33
【问题描述】：

我正在将 react 电子商务项目作为一个学习过程进行工作，并且陷入了这样一种情况，即我有一个包含多个订单对象的订单数组，而在订单内部有一个包含 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()

函数，但它会抛出一个错误提示

找不到未定义的地图

我正在学习 React JS，还不是专家。非常感谢所有专家提供的任何帮助。

提前致谢

【问题讨论】：

解构很可能是问题所在；你用const { order_items } = myOrders了吗？因为您需要const { order_items } = myOrders[i] 或（外部.map() 来迭代myOrders）
是的，我确实使用了 const { order_items } = myOrders
但是没有myOrders.order_items，因为myOrders是一个数组。
所以我需要迭代 myOrders，并且对于每个 myOrders 我必须获取 order_items。对吗？
是的，完全正确。两个嵌套的 map() 在这里是理想的。

标签： javascript arrays reactjs

【解决方案1】：

您可以尝试在 myOrders 数组上使用 map 函数来检索 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);

【讨论】：

谢谢。现在我必须再次迭代结果，我将可以访问 prod_id、name 和 qty。我试试看

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

【讨论】：

感谢您的回答。我试试看