ReactJS中无法获取指定JSON数据的问题求助

先看你的原始数据结构，这是一个单个对象，不是对象数组：

{"id": "1", "properties": [{"shape": "circle", "color": "red"}]}

咱们来逐个分析你两种写法的问题，再给出正确的实现：

写法1的错误原因 #

1. 你直接对shapeData调用map方法，但shapeData是对象，不是数组——只有数组才有map方法，这是核心问题之一；
2. 嵌套的data.properties.map(...)里，箭头函数()=>{item.shape}只是写了一个表达式，但没有任何返回操作（箭头函数用大括号包裹时，必须显式写return才能返回值），而且外层的map也没有返回内容，所以ESLint会抛出no-unused-expressions错误，因为你写了表达式却没做任何有效处理。

写法2的错误原因 #

报错TypeError: Cannot read property 'message_type' of null看起来有点笔误？大概率是shapeData有时候为null/undefined，导致你直接访问shapeData.properties时触发了“无法读取null的属性”的错误。另外，你的箭头函数同样没有返回值，就算map执行了，也得不到你想要的shape数组。

正确的实现方式 #

根据你的需求，如果你想提取properties数组里所有的shape值，或者在React中渲染这些内容，参考下面的写法：

1. 提取shape值到数组 #

// 确定shapeData一定存在的情况
const shapeList = shapeData.properties.map(item => item.shape);
// 结果：["circle"]

// 不确定shapeData是否存在（可能为null/undefined），用可选链做安全处理
const shapeList = shapeData?.properties?.map(item => item.shape) || [];

2. React组件中渲染内容 #

如果是在React的return里渲染JSX，要注意加key，同时做安全判断：

return (
  <div>
    {shapeData?.properties?.map((item, index) => (
      <p key={index}>当前图形：{item.shape}</p>
    ))}
  </div>
);

这里的?.是可选链操作符，能自动处理shapeData或properties为null/undefined的情况，避免报错；箭头函数不用大括号的话，会自动返回后面的JSX元素，不用显式写return。

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