Question

我有一个map函数，可以像这样呈现JSON数据：

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

它成功地迭代并从非嵌套属性中呈现数据，但是我无法使其呈现USD嵌套道具，如下所示：

     "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>

我收到的错误消息是＆＃34; TypeError：无法读取属性＆＃39;金额＆＃39; null。＆＃34;我也试过方括号，但没有成功。

Answer 1

正如您在评论中提到的，某些价格值为空（所有商品都不包含价格对象），这就是它抛出错误的原因：

无法读取null的属性'amount'。

解决方案是，在访问金额属性之前进行检查，如下所示：

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

Answer 2

虽然上面的答案是100％正确（并推荐），但我会考虑使用_.get ，如果你已经在使用lodash：

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的路径方法，创建可读和富有表现力的东西非常简单：

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>

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

2 个答案:

更新