Question

我有这个反应成分。它传递了一个称为数据的道具。

数据是像

这样的对象

{ 
  "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中包含的嵌套对象时，整个道具变为“未定义”，我无法引用任何内容。

完全错误：

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设置为使用promise，但该promise不会阻止发生错误的组件的初始呈现。最好的办法是在this.props.data.meta有值之前不渲染任何内容，或者对冲name变量，例如。

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

这可能仍会闪现undefined，但它不会爆炸。

Answer 2

这是一个非常疯狂的猜测..但是标题值后的昏迷呢？

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

2 个答案: