为什么我无法访问 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(&nbsp;this.state.data.hits&nbsp;&&&nbsp;this.state.data.hits[0])

Answer 2

问题是您在 state 中的初始值是data: ''一个字符串值，它会在执行时第一次渲染时抛出错误this.state.data.hits[0]。要解决此问题，您可以将初始状态更改为如下所示&nbsp; &nbsp; this.state = {&nbsp; &nbsp; &nbsp; input : '',&nbsp; &nbsp; &nbsp; data: {&nbsp; &nbsp; &nbsp; &nbsp; hits: []&nbsp; &nbsp; &nbsp; ,&nbsp; &nbsp; &nbsp; isloading: true&nbsp; &nbsp; }建议：您不需要绑定该方法，fetchData因为它是在同一范围内调用的如果您删除此绑定，那么您甚至不需要构造函数，您可以使用以下代码替换整个构造函数&nbsp; &nbsp; state = {&nbsp; &nbsp; &nbsp; input : '',&nbsp; &nbsp; &nbsp; data: { hits: [] },&nbsp; &nbsp; &nbsp; isloading: true&nbsp; &nbsp; }

Answer 3

（请参阅下面有趣的评论，关于有条件地调用 console.log() 还是创建一个与您期望的数据结构匹配的初始状态更好。这段代码确实有效，尽管有些人更喜欢不同的方法）。render 方法在获取数据之前运行，因此此时您的数据等于一个空字符串。您可以放置一个条件语句，以便它仅在数据存储后执行 console.log() ：render(){&nbsp; &nbsp;return(&nbsp; &nbsp; &nbsp; <div>&nbsp; &nbsp; &nbsp; &nbsp;{&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; this.state.data && this.state.data.hits &&&nbsp; console.log(this.state.data.hits[0])&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; </div>);}如果没有 this.state.data，代码将不会经过下一个 && 操作符。但是您还需要检查数据对象是否具有“hits”属性，因此您为此编写了另一个 && 运算符。Console.log() 不是“假的”，所以它会运行。