React中如何将数组对象转为单个cartQuantity的子数组

我定义了如下常量：

const cartProducts = props.cartSlice;

该常量的输出为以下数组：

[
  {
    "cartQuantity": 3,
    "product": "5f15d92ee520d44421ed8e9b",
  },
  {
    "cartQuantity": 2,
    "product": "5f15d964e520d44421ed8e9c",
  },
  {
    "cartQuantity": 1,
    "product": "62e5285f92b4fde9dc8a384c",
  },
  {
    "cartQuantity": 4,
    "product": "5f15d9b3e520d44421ed8e9d",
  },
]

我希望在ReactJS中编写代码，将每个对象的cartQuantity值分别放入单独的单元素子数组中，期望输出如下：

[3]
[2]
[1]
[4]

目前我实现的代码会将所有cartQuantity合并到一个数组中：

const quantity = cartProducts.map((item, i) => item.cartQuantity);

// 输出
[3, 2, 1, 4]

请问如何修改代码，实现每个cartQuantity对应一个单元素子数组的需求？

只需要在map回调里把item.cartQuantity包裹成数组返回即可：

const quantityArrays = cartProducts.map(item => [item.cartQuantity]);

执行后，quantityArrays会是一个包含多个单元素子数组的数组：

[ [3], [2], [1], [4] ]

如果需要在React组件中单独渲染每个子数组，可以遍历这个结果：

// 示例渲染代码
return (
  <div>
    {quantityArrays.map((arr, index) => (
      <div key={index}>{JSON.stringify(arr)}</div>
    ))}
  </div>
);

这样就能得到你期望的每个单元素子数组单独展示的效果。

内容的提问来源于stack exchange，提问作者Jesee Kiigu