React中如何展示嵌套对象数组内的分类ID与名称？

现有代码的问题 #

1. 数据里每个条目没有title字段，原代码用item.title会显示undefined，应该改为展示条目自身的id
2. category是每个条目下的单个对象，不是数组，所以不能用map遍历，直接访问属性即可

修正后的代码 #

dataItems.map((item) => {
  return (
    <div key={item.id}>
      <h1>条目ID：{item.id}</h1>
      <div>
        <p>分类ID：{item.category.id}</p>
        <p>分类名称：{item.category.name}</p>
      </div>
    </div>
  );
});

核心要点 #

• 用item.id作为列表元素的key（比index更稳定，是React列表渲染的推荐写法）
• 直接通过item.category.id和item.category.name获取分类的ID和名称，因为category是对象而非数组，无需遍历
• 替换了原代码中不存在的item.title，改为展示条目自身的ID

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