我有这个react组件。它传递了一个名为 data 的props。

数据是一个对象，如

{ 
  "title" : "some title",
  "meta" : { "name": "frank", 
             "last": "lee" 
           }
}



export default class Details extends React.Component {

  constructor () {
    super()

    this.state = {
      data: []
    }
  }

  render () {
    return (
      <div>
        <h1>{this.props.data.title}</h1>
      </div>
    )
  }
};

这很好。但是，当我尝试引用此props中包含的嵌套对象时，整个props将变为“未定义”并且我无法引用任何内容。

完整错误：

Uncaught TypeError: Cannot read property 'name' of undefined

这打破了：

  render () {
    return (
      <div>
        <h1>{this.props.data.title}</h1>
        <p>{this.props.data.meta.name}</p>
      </div>
    )
  }

这打破了：

  render () {

    var name = this.props.data.meta.name

    return (
      <div>
        <h1>{this.props.data.title}</h1>
        <p>{name}</p>
      </div>
    )
  }

一切都坏了。我敢肯定这是我忽略的一些小东西，一些额外的眼睛可能会在这里帮助我。

编辑：

这是调用 Details.jsx 的组件

import Details from './Details.jsx'

export default class DetailsWrap extends React.Component{
  constructor () {
    super()

    this.state = {
      data: []
    }
  }

  loadData = (id) => {
    apipromise.getDetails(id)
    .success((response) => {

      this.setState({
        data: response
      })

    })
    .fail((response) => {

    });
  }

  componentDidMount () {

    this.loadData(this.props.id)
  }

  render () {

    return (
        <Details data={this.state.data}/>
    )
  }

};