Question

我从端点获得一个json，如下所示：

{"section":{"name":"name","subsections":[
 {"name":"one","snippets":[{"title":"title","body":"body"}]},
 {"name":"two","snippets":[{"title":"title","body":"body"}]}]
}}

这就是我获取数据的方式：

fetchData() {
  axios.get('/api/data')
  .then(response => {
    this.setState({
      section: response.data.section
    })
  })
  .catch(error => {
    console.log(error);
  });
}

componentDidMount() {
  this.fetchData();
}

但是当我致电this.state.section.subsections[0]时，我收到以下错误：

Uncaught TypeError: Cannot read property '0' of undefined

我知道subsections是一个数组，但是从它获取元素。我收到一个错误。谁会知道我可能做错了什么？

编辑：

我想访问render方法中的状态。我可以访问this.state.section.name，我也可以在控制台上打印this.state.section.subsections。但每当我尝试使用this.state.section.subsections[0]访问元素时，我都会收到错误消息。

Answer 1

您可能尝试在数据可用之前访问，

试试这个：

this.setState({
    section: response.data.section
},() => {
    console.log('After state set :' ,this.state.section.subsections[0]);
});

如果你在这里得到console.log，问题就像我上面解释的那样，如果没有，那么你需要console.log(this.state.section)并检查输出

第一个解决方案：

从渲染

提供默认的空数组

render(){
   const subsections = this.state.section.subsections || [];
   return(...)
}

第二个解决方案：

从reducer提供默认空数组作为初始状态

Answer 2

当您尝试从Uncaught TypeError: Cannot read property '0' of undefined变量中检索属性时，会出现

undefined。

基本上，控制台正试图告诉您this.state.section.subsections == undefined，因此您无法呼叫undefined[0]。

在轮询变量之前，您可能想要检查this.state.section.subsections是否存在。

即

if (this.state.section.subsections) {

  // Exists.
  console.log(this.state.section.subsections)

} else {

  // Undefined.
  console.log(this.state.section.subsections)

}

将嵌套对象存储在React State中

2 个答案: