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

Question

我有这个 react 组件。它传递了一个名为数据的 Prop 。

数据是一个对象，如

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

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

完整错误:

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 但它不会爆炸，因为物体足够浅。但是，在空的 meta 属性上调用 name 会爆炸，因为 meta 不存在。

您已将 loadData 设置为使用 promise ，但该 promise 不会阻止发生错误的组件的初始呈现。你最好的选择是在 this.props.data.meta 有一个值之前不渲染任何东西，或者对冲你的 name 变量，例如。

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

虽然它不会爆炸，但它可能仍会闪烁 undefined。