无法从React组件访问嵌套的JSON数据

Question

我有一个map函数，它呈现检索到的JSON数据，如下所示：

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

它可以成功地迭代并从未嵌套的属性呈现数据，但是我很难让它呈现美元嵌套的道具，如下所示：

     "price":{  
        "amounts":{  
           "GBP":"£8,185",
           "USD":"$12,000",
           "EUR":"€10.755"
        },

我试图像这样提取它：

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

我收到的错误消息是“ TypeError：无法读取null的属性'amounts'。” 我也尝试使用方括号未成功。

Answer 1

正如您在评论中提到的，某些价格值是null（所有商品均不包含price对象），这就是为什么它引发错误：

无法读取null的属性“数量”。

解决的方法是，在访问amount属性之前放入支票，就像这样：

price={item.price? (item.price.amounts||{}).USD||0 : 0}

Answer 2

尽管上面的答案是100％正确（并建议）， _.get 如果您已经在使用lodash，我会考虑使用_.get：

import get from 'lodash/get'

// in render
// the third argument is the default price is *any* of the path is not defined
price={ get(item, 'price.amounts.USD', 0) }

对我而言，lodash中的路径系统（get，has，set）具有极强的表现力，并且代码更具可读性。 如果要导入的只是get （使用上述导入，而不是import { get } from lodash ），则尺寸占用也非常小。

更新：

@SimianAngel一个有趣的评论-关于默认值100％正确。 0可能不是您想要的默认值！ 当然取决于您的业务逻辑。

再次利用lodash的path方法，创建可读性和表达性很简单的方法：

import get from 'lodash/get'
import has from 'lodash/has'

// in render
<div>
  {has(item, 'price.amounts.USD')) 
    ? <Card key={item.id} price={get(item, 'price.amounts.USD'} />
    : <div>This item isn't available in this region</div>
  }
</div>