React中如何在嵌套循环中返回所有对象？

你的代码问题在于嵌套使用map会返回二维数组，而你需要的是一维数组。以下是几种可行的解决方案：

方法1：使用flatMap（推荐） #

flatMap会先执行map操作，再将结果自动扁平化一层，完美适配你的场景：

const data = [{ id:1, products:[{id:1, name:'apple'}, {id:2, name:'orange'}] },{id:2, products:[{id:3, name:'grapes'}, {id:4, name:'banana'},  {id:5, name:'dragonFruit'}]}]

const result = data.flatMap(item => item?.products || []);
console.log(result);

方法2：map + flat() #

如果运行环境不支持flatMap，可以先用map提取所有products数组，再用flat()扁平化：

const result = data.map(item => item?.products || []).flat();

方法3：使用reduce手动累加 #

这种方式兼容性最好，手动将每个products数组的元素合并到结果数组中：

const result = data.reduce((total, item) => {
  total.push(...(item?.products || []));
  return total;
}, []);

以上三种方法都能得到你期望的一维数组结果：

[
  {id: 1, name: 'apple'},
  {id: 2, name: 'orange'},
  {id: 3, name: 'grapes'},
  {id: 4, name: 'banana'},
  {id: 5, name: 'dragonFruit'}
]

内容的提问来源于stack exchange，提问作者Asif Kaif