Next.js中访问数组内子产品对象显示Undefined问题求助

问题原因 #

subProducts是通过filter方法返回的数组，数组本身没有title属性——只有数组里的每一个子产品对象才包含title字段。你直接调用subProducts.title自然会返回undefined，而console.log(subProducts)能正常输出是因为它打印的是整个数组的内容。

解决方案 #

根据你的需求，分两种场景处理：

1. 展示所有匹配的子产品标题

需要遍历subProducts数组，逐个访问每个子产品的title：

• 若在React等框架中渲染：

{subProducts.map((item, idx) => (
  <p key={idx}>{item.title}</p>
))}

• 普通JavaScript中打印所有标题：

subProducts.forEach(item => {
  console.log(item.title);
});

2. 仅获取第一个匹配的子产品标题

直接取数组的第一个元素再访问title，建议用可选链操作符避免数组为空时报错：

console.log(subProducts[0]?.title);

修正后的代码示例 #

const slug = '001';  
const product = data.product.find(x => x.slug === slug);
const subProducts = data.subProduct.filter(x => x.slug == slug);

// 打印所有子产品标题
subProducts.forEach(item => console.log(item.title));
// 或者打印第一个子产品标题
console.log(subProducts[0]?.title);

内容的提问来源于stack exchange，提问作者Raj Kamal