ReactJS：如何使用Map创建多级数组并提取嵌套图片数组数据

看起来你的问题出在错误地遍历了imgArray的单个元素，而不是直接将整个imgArray存入目标数组。让我们一步步修正这个问题：

问题分析 #

你的CartData结构是一个外层包含单个元素的二维数组，每个内层对象都有自己的imgArray数组。你需要的是把每个对象的imgArray完整地存入imageArray，而不是拆分其中的单个图片路径。

正确实现代码 #

方法1：使用forEach遍历（直观易懂）

let imageArray = [], data1 = [], data2 = [];

// 先取出CartData中的内层数组（因为你的外层数组只有一个元素）
const innerCartData = CartData[0];
innerCartData.forEach((item, index) => {
  // 直接将整个imgArray存入imageArray对应索引
  imageArray[index] = item.imgArray;
  data1[index] = item.data1;
  data2[index] = item.data2;
});

方法2：使用reduce更简洁

如果你喜欢函数式风格，可以用reduce一次性完成所有数据提取：

const { imageArray, data1, data2 } = CartData[0].reduce((result, item) => {
  result.imageArray.push(item.imgArray);
  result.data1.push(item.data1);
  result.data2.push(item.data2);
  return result;
}, { imageArray: [], data1: [], data2: [] });

为什么你的原代码会出错？ #

在你的原代码中，最内层的value.imgArray.map(...)是遍历每个图片路径，然后用imageArray[index] = value赋值——这里的index是imgArray内部的索引（比如每个imgArray只有1个元素，索引都是0），所以最后会被覆盖，而且得到的是单个字符串，不是你需要的数组结构。你完全不需要遍历imgArray，直接把它整个存入imageArray即可。

预期输出 #

执行上述代码后，你会得到：

{
  data1: ["any", "any"],
  data2: ["any", "any"],
  imageArray: [["img1.jpg"], ["img2.jpg"]]
}

内容的提问来源于stack exchange，提问作者Muhammad Usman