为什么我无法访问 state 中的嵌套数据

Question

我正在尝试访问存储在 this.state.data 中的嵌套数组和对象。但我无法访问数组谁能告诉我为什么？任何人都知道为什么错误“无法读取未定义的属性'0'”不断弹出。这个错误让我发狂。我不明白为什么这会不断发生。import React from 'react';const url="https://pixabay.com/api/?key=13565216-b3f251bf75153fd651dec947c&q=yellow+flowers&image_type=photo&pretty=true";class App extends React.Component{  constructor(props){    super(props);    this.state = {      input : '',      data: '',      isloading: true    }    this.fetchData=this.fetchData.bind(this);  }  componentDidMount(){    this.fetchData();  }  fetchData(){    fetch(url)    .then(res=>res.json())    .then(result=>{      this.setState({        data:result,        isloading: false      })    });  }  render(){    return(      <>      {        console.log(this.state.data.hits[0])      }      </>    );  }}export default App;

Answer 1

在初始渲染data过程中只是空字符串并尝试访问hits[0]is undefine 实际上 this.state.data.hits 本身是未定义的，因此您可以在访问它之前首先进行检查，如下所示

console.log( this.state.data.hits && this.state.data.hits[0])

Answer 2

问题是您在 state 中的初始值是data: ''一个字符串值，它会在执行时第一次渲染时抛出错误this.state.data.hits[0]。

要解决此问题，您可以将初始状态更改为如下所示

    this.state = {

      input : '',

      data: {

        hits: []

      ,

      isloading: true

    }

建议：

您不需要绑定该方法，fetchData因为它是在同一范围内调用的

如果您删除此绑定，那么您甚至不需要构造函数，您可以使用以下代码替换整个构造函数

    state = {

      input : '',

      data: { hits: [] },

      isloading: true

    }

Answer 3

（请参阅下面有趣的评论，关于有条件地调用 console.log() 还是创建一个与您期望的数据结构匹配的初始状态更好。这段代码确实有效，尽管有些人更喜欢不同的方法）。

render 方法在获取数据之前运行，因此此时您的数据等于一个空字符串。

您可以放置一个条件语句，以便它仅在数据存储后执行 console.log() ：

render(){

   return(

      <div>

       {

          this.state.data && this.state.data.hits &&  console.log(this.state.data.hits[0])

        }

      </div>

);

}

如果没有 this.state.data，代码将不会经过下一个 && 操作符。但是您还需要检查数据对象是否具有“hits”属性，因此您为此编写了另一个 && 运算符。Console.log() 不是“假的”，所以它会运行。