Javascript 反应嵌套对象给出错误

我有一个可以工作的组件，只要它不是嵌套的，就会从状态返回数据。然而，如果我需要在对象中深入挖掘，我会得到一个错误：“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>
        )
}

类Concert扩展组件{
建造师（道具）{
超级（道具）；
此.state=({
音乐会：''
})
}
componentDidMount（）{
var concertid=`${REQ_URL}/${this.props.match.params.concertid}`；
获取（协奏曲{
方法：“获取”
})
.then（response=>response.json（））
。然后（json=>{
这是我的国家({
音乐会：json
})
})
}
render（）{
返回(
//这是返回错误的部分
//this.state.concert.id返回正确的值
//正this.state.concert.artist.name不包含值
地点：{本州音乐会艺术家姓名}
)
}

---

}

很简单，api调用是异步的，因此在获得api响应之前，this.state.concert.artist.name将为{“empty”}

使用以下命令：

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

---

很简单，api调用是异步的，因此在获得api响应之前，this.state.concert.artist.name将为{“empty”}

使用以下命令：

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

---

第一次呈现组件时，

this.state.concert

的值是

'

（您在构造函数中设置了该值），因此如果您试图访问

this.state.concert.artist.name

，您实际上是在试图访问

未定义的.name

，这就是您的错误

this.state.concert

的值只有在加载组件后才得到更改——在

fetch

调用的

success

回调完成后，只有到那时该值才可用

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

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

{this.state.concert&&this.state.concert.artist&&
地点：{本州音乐会艺术家姓名}
}       

当组件第一次呈现时，

this.state.concert

的值是

'

（您在构造函数中设置了该值），因此如果您试图访问

this.state.concert.artist.name

，您实际上是在试图访问

undefined.name

，这就是您的错误

this.state.concert

的值只有在加载组件后才得到更改——在

fetch

调用的

success

回调完成后，只有到那时该值才可用

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

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

{this.state.concert&&this.state.concert.artist&&
地点：{本州音乐会艺术家姓名}
}       

问题在于，由于API调用是异步的，所以它试图在数据到达之前进行渲染

解决此问题的更好方法是使用以下默认值提取值：

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

-

这样，如果艺术家不在场，您只会得到未定义的

，而不会抛出错误

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

this.state = {
    concert: {}
};

---

问题是，由于API调用是异步的，所以它试图在数据出现之前进行渲染

解决此问题的更好方法是使用以下默认值提取值：

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

-

这样，如果艺术家不在场，您只会得到未定义的

，而不会抛出错误

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

this.state = {
    concert: {}
};

---

事实上，它是未定义的，但this.state.concert.id当时也是未定义的，并且呈现正确。为什么一个有效，而另一个无效？顺便说一句，您的修复程序工作正常。因为您访问的是

this.state.concert.id

，而不是

this.state.concert.SOMETHING.id

。Concert可用（它是一个空字符串），因此

Concert.id

未定义，这不是一个错误。事实上，它未定义，但此时this.state.Concert.id也未定义，并且呈现正确。为什么一个有效，而另一个无效？顺便说一句，您的修复程序工作正常。因为您访问的是

this.state.concert.id

，而不是

this.state.concert.SOMETHING.id

。Concert可用（它是一个空字符串），因此

Concert.id

未定义，这不是一个错误。感谢您的建议。唯一的问题是“concert”对象非常大，所以设置const需要一些时间。谢谢你的想法。唯一的问题是“concert”对象非常大，所以设置const需要一段时间。我喜欢这个建议。我喜欢这个建议。