React遍历Laravel集合嵌套对象报错，如何实现产品与分类展示？

错误原因 #

你的数据结构里，product.category是单个对象而非数组，而map()方法仅支持数组类型。你试图对单个对象调用map()，这直接导致了TypeError: item.category.map is not a function报错。

正确实现代码 #

不需要用map遍历category，直接访问对象属性即可：

控制台调试版本 #

products.map((product) => {
    console.log('产品名称:', product.name);
    console.log('分类名称:', product.category.category);
});

前端页面渲染版本（以React为例） #

如果要在页面中展示内容，可参考以下写法：

{products.map((product) => (
    <div key={product.id} className="product-item">
        <p>产品：{product.name}</p>
        <p>分类：{product.category.category}</p>
    </div>
))}

额外注意事项 #

• 空值防护：如果后端可能返回null/undefined的category，建议添加空值判断避免报错：

  console.log('分类名称:', product.category?.category || '无分类');
  

• 唯一key：遍历列表时务必给每个元素添加唯一key（如product.id），这是React等框架的性能优化要求。

内容的提问来源于stack exchange，提问作者Wahidul Alam