React读取JSON对象数据报错：缺失exampleValue属性如何解决？

当遍历示例中的data数组并访问exampleValue字段时，第二个对象因缺少该属性会导致报错。以下是无需给第二个对象添加字段的解决办法：

• 可选链操作符（?.）
  这是最简洁的方式，ES2020及以上版本支持，React项目通常已兼容。访问属性时添加?.，若属性不存在则返回undefined，不会抛出错误：

  data.map(item => (
    <div key={item.name}>
      {item?.exampleValue} {/* 安全访问，不存在时返回undefined，React会自动忽略 */}
    </div>
  ))
  

• 解构赋值设置默认值
  解构对象时为缺失字段指定默认值，确保变量始终有可用值：

  data.map(({ name, age, exampleValue = '无数据' }) => (
    <div key={name}>
      {exampleValue}
    </div>
  ))
  

• 逻辑或（||）设置默认显示文本
  若需要给缺失字段显示默认内容，可使用逻辑或运算符（注意：若字段本身值为0、空字符串等假值，也会被替换为默认值）：

  data.map(item => (
    <div key={item.name}>
      {item.exampleValue || '无数据'}
    </div>
  ))
  

• 严谨的条件判断
  通过in运算符判断对象是否包含该属性，避免假值被误判为缺失：

  data.map(item => (
    <div key={item.name}>
      {'exampleValue' in item ? item.exampleValue : '无数据'}
    </div>
  ))
  

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