React组件无法访问嵌套JSON数据：TypeError问题求助

嘿，这个问题我之前也踩过坑！报错的原因特别明确：你的item.price里有部分条目是null或者undefined，这时候直接去访问item.price.amounts就相当于对着空盒子伸手拿东西，肯定会触发类型错误。

给你几个实用的解决办法，按需选就行：

1. 用可选链操作符（最简洁，推荐） #

这是ES2020之后支持的语法，用?.就能安全地访问嵌套属性——只要中间某一层是null/undefined，整个表达式就会返回undefined，不会报错。修改后的代码长这样：

<div className="items"> 
  {items.map(item => <Card key={item.id} price={item.price?.amounts?.USD} />)} 
</div>

如果item.price是null，price属性就会传undefined给Card组件，你还可以在Card组件里给个默认值，比如显示"暂无价格"。

2. 条件判断（兼容旧项目） #

如果你的项目还没升级到支持可选链的环境，就用传统的&&或者三元表达式做前置检查：

<div className="items"> 
  {items.map(item => (
    <Card 
      key={item.id} 
      price={item.price && item.price.amounts ? item.price.amounts.USD : '暂无价格'} 
    />
  ))} 
</div>

这里加了个默认值，避免组件收到undefined出现异常。

3. 提前预处理数据 #

要是你不想在渲染层写太多判断逻辑，可以先把数据处理一遍，给空的price字段补个默认结构：

// 先处理数据，确保每个item都有合法的price结构
const safeItems = items.map(item => ({
  ...item,
  price: item.price ?? { amounts: { USD: '暂无价格' } }
}));

// 再渲染处理后的数据
<div className="items"> 
  {safeItems.map(item => <Card key={item.id} price={item.price.amounts.USD} />)} 
</div>

??是空值合并运算符，只会在item.price是null/undefined时才用后面的默认值，比||更精准。

最后建议你先在控制台console.log(items)看看哪些条目没有price字段，确认下是API返回的问题还是数据处理环节漏了，从根源上避免类似问题~

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