React 渲染在属性中的嵌套对象上窒息

Question

我有这个反应组件。它传递了一个名为 data 的道具。

数据是一个对象，如

{ 
  "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>
    )
  }
};

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

完整错误：

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}/>
    )
  }

};

Answer 1

看起来好像data不一定在render火灾之前设置。由于您设置了初始（空）data属性，因此当您调用this.props.data.title初始渲染时，该值为null但它不会因为对象足够浅而爆炸。但是，调用name空meta属性会爆炸，因为meta不存在。

您已将 loadData 设置为使用承诺，但该承诺不会阻止发生错误的组件的初始呈现。您最好的选择是要么在this.props.data.meta有值之前不渲染任何内容，要么对冲您的name变量，例如。

const name = this.props.data.meta && this.props.data.meta.name;

undefined尽管它不会爆炸，但它可能仍会闪烁。