Question

我有一个像这样的对象：

export const contact = {
  _id: "1",
  first:"John",
  name: {
    first:"John",
    last:"Doe"
  },
  phone:"555",
  email:"john@gmail.com"
};

我正在读它

return (
 <div>
   <h1>List of Contact</h1>
   <h1>{this.props.contact._id}</h1>
 </div>

）

在这种情况下，我得到预期的输出。

return (
  <div>
    <h1>List of Contact</h1>
    <h1>{this.props.contact.name.first}</h1>
  </div>
)

但是当我读取嵌套属性时，我会收到类似

的错误

未捕获的TypeError：无法读取属性＆＃39; first＆＃39;未定义的

如何阅读这些嵌套对象的王者？这是my source

Answer 1

您需要在此处解决三件事：

这是您的contacts-data，我在first对象中看不到任何name属性：

export const contacts = {
  "name": "mkyong",
  "age": 30,
  "address": {
    "streetAddress": "88 8nd Street",
    "city": "New York"
  },
  "phoneNumber": [{
    "type": "home",
    "number": "111 111-1111"
  }, {
    "type": "fax",
    "number": "222 222-2222"
  }]
};

您正在this.props.fetchContacts();上拨打componentDidMount，因此在第一次render来电时，state仍为空，action来电和{{1}会传递新的道具或改变状态然后你进入第二个reducer电话，那就是你准备好使用数据的那一刻。
因此，在尝试使用之前，应检查现有数据。一种方法是有条件地渲染它（当然有更好的方法来做到这一点，这只是为了说明一点）：

render

您正在尝试使用render() { const { contacts } = this.props; return ( <div> <h1>List of Contacts</h1> <h2>{contacts && contacts.name && contacts.name.first //still getting error. "this.props.contacts.name" alone works }</h2> <h2>{contacts && contacts.address && contacts.address.city}</h2> </div> ) }这是一个错字吗？不应该是this.props.contact.name.first而不是contacts？

修改：作为评论的后续内容，作为JavaScript（或任何其他语言）的一般规则，在尝试访问对象的属性之前，应始终检查对象的存在引用。
至于您的用例，如果您必须有值来呈现，或者您甚至可以简化数据方案，则可以使用contact。
管理起来要简单得多：

defaultProps

比这个：

export const contacts = { "fName": "mkyong", "lName": "lasty", "age": 30, "streetAddress": "88 8nd Street", "city": "New York", "homeNumber": "111 111-1111", "faxNumber": "222 222-2222" };

使用react js显示嵌套的JSON

1 个答案: