在 React State 中存储嵌套对象答案

【问题标题】：Storing nested objects in React State在 React State 中存储嵌套对象
【发布时间】：2017-10-17 07:51:49
【问题描述】：

我从一个看起来像这样的端点获取 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 是一个数组，但要从中获取元素。我得到一个错误。有谁知道我可能做错了什么？

编辑：

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

【问题讨论】：

您正在获取componentDidMount 中的数据并在哪里访问它？因为componentDidMount 是最后一个被执行的生命周期钩子。为什么不尝试获取componentWillMount 中的数据？
我在 render() 方法中访问它。
componentDidMount 在render 方法之后被调用。尝试获取componentWillMount中的数据，它可以工作。
@Nandu 我试过了。没用。我刚刚编辑了问题，请看一下。
很高兴它成功了！

标签： reactjs ruby-on-rails-5 webpacker

【解决方案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 提供默认的空数组作为初始状态

【讨论】：

我可以在控制台上打印this.state.section。只有当我尝试访问渲染方法中的元素时，才会收到错误消息。

【解决方案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)

}

【讨论】：