Question

我有一个可以工作的组件，只要它没有嵌套就会从State返回数据。但是，如果我需要在对象中深入挖掘，我会收到一个错误：“TypeError：无法读取未定义的属性'name'。

我很肯定它有一个值（检查Inspector，变量确实有一个值，这就是我知道如何放入代码的方式）。为什么它适用于更高的价值，而不是更低的价值？

class Concert extends Component {

constructor(props) {
    super(props);

    this.state = ({
        concert:''
    })
}
componentDidMount(){
    var concertid = `${REQ_URL}/${this.props.match.params.concertid}`;
    fetch(concertid, {
        method: 'GET'
    })
    .then(response => response.json())
    .then(json => {
        this.setState({
            concert:json
        })
    })


}
render() {
    return (
        <div>
            <Header />
            <div className="concert">
                <div className="venue">

                //THIS IS THE PART THAT RETURNS ERROR
                //this.state.concert.id returns a correct value
                //POSITIVE this.state.concert.artist.name DOES CONTAIN VALUE

                Venue: {this.state.concert.artist.name}
                </div>

            </div>
        </div>
        )
}

}

Answer 1

简单，api调用是异步的，所以this.state.concert.artist.name将为{“empty”}，直到你得到api响应。

使用它：

            Venue: {this.state.concert && this.state.concert.artist && this.state.concert.artist.name}

Answer 2

第一次呈现组件时，this.state.concert的值为''（您在构造函数中设置了该值），因此如果您尝试访问this.state.concert.artist.name，那么实际上是试图访问undefined.name - 而且有错误。

this.state.concert的值只有在加载了组件之后才会发生变化在success来电fetch回拨完成之后，只有该值才可用。

您可以做的是在访问之前检查您是否有值：

{this.state.concert && this.state.concert.artist && <div>Venue: {this.state.concert.artist.name}</div> }

Answer 3

问题是，由于API调用是异步的，因此它会在数据存在之前进行渲染。

更好的解决方法是使用es6 object destructuring使用默认值

提取值

const {
  id,
  artist: {
    name
  } = {}
} = this.state.concert;

-

Venue: {name}

这样，如果艺术家不在场，您只会获得undefined而非投掷错误

默认情况下，Concert也应该是构造函数中的对象：

this.state = {
    concert: {}
};

React嵌套对象提供错误

3 个答案: