Next.js中如何映射对象数组内的数组属性？返回void问题求助

你得到void（实际是undefined）的核心原因是：forEach方法本身没有返回值，它只会遍历数组执行回调逻辑，不会生成或返回新数组。你把forEach的执行结果赋值给sub，自然得到的是undefined，而且你在回调里的map结果也没有被收集。

正确写法 #

如果你想收集所有sub数组里的项生成<li>字符串数组，可以用flatMap（先map再扁平化数组）：

// 修正拼写：cartegory → category
const category = [
  {
    id: 1,
    img: '/categoryImage/vehicles_dmtvjd.webp',
    name: 'Vehicles',
    sub: [{name:'hhh', age:'456'}]
  },
  {
    id: 2,
    img: '/categoryImage/real-estate_vkbo6e.webp',
    name: 'Properties & Real estate',
    sub: [{name:'hgh', age:'456'}]
  },
  {
    id: 3,
    img: '/categoryImage/mobile-phone_vy4aaw.webp',
    name: 'Mobile Phone & Tablet',
    sub: [{name:'hgh', age:'856'}]
  }
]

// 收集所有sub项的<li>字符串到数组
const subItems = category.flatMap(item => {
  return item.sub.map(subItem => `<li>${subItem.name} ${subItem.age}</li>`);
});

// 如果需要拼接成完整的HTML字符串
const subHtml = subItems.join('');

为什么原来的代码无效？ #

• forEach的设计就是仅执行遍历逻辑，没有返回值，所以const sub = category.forEach(...)必然得到undefined。
• 你在forEach回调里调用的e.sub.map(...)确实会生成新数组，但这个数组没有被赋值给任何变量，也没有被返回，相当于没有被利用。

内容的提问来源于stack exchange，提问作者Tuoyo Okoro