Javascript React-访问返回数据中的嵌套对象

我正在使用

fetch

从本地API返回一些数据。我可以返回数据并设置状态。但是，在我的

render（）

函数中，当使用

map

并试图访问数据中比顶级对象更深的任何对象时，我会得到一个

未定义的

错误。我可以正确地将任何级别的数据记录到控制台中，但在渲染组件中我无权访问它

constructor(props) {
  super(props);
  this.state ={
    verifications: []
  }
}

componentWillMount(){
  fetch('http://localhost:3001/verifications')
    .then(response => response.json())
    .then((verifications) => {
      this.setState({verifications})
      console.log(this.state);
    });
}

在我的渲染中

{this.state.verifications.map(verification =>
  <div key={verification._id}>
    <ReviewListItem
      hasAvatar={true}
      imageUrl={verification.supplier.logo}
      title={verification.supplier.companyName}
      description={verification.tasks.length}
    />
  </div>
)}

---

您的一个供应商为空（至少一个）。考虑使用“代码”> IVIULL＝Valiguest.Fualial.Posiiel.Logo：NULL}< /COD>而不是<代码> IVIULL =“验证”。供应商。徽标} /代码>

< P>您的数组的第二个索引有“代码>供应商：NULU/COD>。您可以先检查供应商是否存在

{this.state.verifications.map(verification =>
  <div key={verification._id}>
    <ReviewListItem
      hasAvatar={true}
      imageUrl={verification.supplier && verification.supplier.logo}
      title={verification.supplier && verification.supplier.companyName}
      description={verification.tasks.length}
    />
  </div>
)}

{this.state.verifications.map（verification=>
)}

供应商在您的json代码片段中明显为空：

"supplier": null,

因此，它显然失败了：）

---

我相信angular会自动检查以下表达式中的空值：

foo.bar.baz.something.deeph.nested

-因此，如果任何内容为空，则结果将为空-在react中（以及在js中），您需要自己检查空值。

verification.supplier是一个数字，而不是一个对象。看起来你试图访问的字段并不存在于dataAh垃圾中的任何地方。。。哎呀。发布了我的种子文件。编辑以显示实际数据。嗯。。。废话：-（请原谅我在角落里撅嘴。这太荒谬了。我想先看整个物体是值得的。我从来没有通过第一个物体，只是假设其余的都在那里。谢谢大家的帮助！类似的事情经常发生在我身上。

"supplier": null,