如何在ReactJS中获取JSON数据的id？res.data.id返回undefined求助

嘿，我完全懂你遇到的困扰！你之所以调用res.data.id返回undefined，核心原因是**res.data其实是一个数组，而不是单个对象**——就像你给出的categoryArray那样，它是包含多个对象的数组，数组本身并没有id属性，id是数组里每一个对象的属性。

下面给你几个实用的解决方案：

1. 获取数组中单个对象的id #

如果你只需要数组里第一个对象的id，直接通过数组索引访问即可：

// 取第一个元素的id
console.log(res.data[0].id);

比如用你提供的categoryArray测试，这行代码会输出'1'。

2. 遍历数组，获取所有对象的id #

如果需要处理数组里所有对象的id，在React中可以用map方法来渲染内容，或者用forEach来遍历打印：

方式一：在React组件中渲染所有id #

return (
  <div>
    {res.data.map((category) => (
      <p key={category.id}>类别ID：{category.id}</p>
    ))}
  </div>
);

注意：React列表渲染需要给每个元素加唯一的key属性，这里用category.id刚好合适。

方式二：在控制台打印所有id #

res.data.forEach((category) => {
  console.log('当前类别ID：', category.id);
});

运行这段代码后，控制台会依次输出'1'、'2'、'3'、'4'。

3. 额外排查小技巧 #

如果还是有问题，可以先确认res.data的结构：

// 确认是否为数组
console.log(Array.isArray(res.data)); // 应该返回true
// 打印完整结构，检查有没有嵌套层级
console.log(res.data);

有时候接口可能会把数组包裹在另一个对象里（比如{ data: [/* 数组内容 */] }），这种情况下你需要先取res.data.data再进行后续操作。

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