时间戳

首页 > 解决方案 > 从数据库中获取对象数组并用反应显示它

javascript - 从数据库中获取对象数组并用反应显示它

问题描述

当我遇到这个问题时，我试图获取一个对象数组。抱歉我的代码混乱，我是初学者。

export class App extends Component {
  state ={
    character:[]
  }
  componentDidMount(){

     fetch('https://swapi.dev/api/people/').then(data => data.json()).then(res =>{
     this.setState(() =>{
       const ar = res.results

       return {
         character: ar
       }
     })
    })


  }
  render() {
    return (
      <div>
         test

          {console.log(this.state.character[0])}
      </div>
    )
  }
}

该代码起初对我来说很好，直到我将控制台日志更改为{console.log(this.state.character[0].name)}“无法读取未定义的属性”，即使第一行完美地显示了对象

标签： javascriptreactjsfetch

解决方案

您的App组件componentDidMount在第一次挂载后执行的生命周期方法中获取数据。{console.log(this.state.character[0].name)}显示错误“无法读取属性，undefined因为当组件第一次安装时，数据尚不可用，这意味着this.state.character仍然是一个空数组。所以当尝试访问时this.state.character[0].name，就像说给我它的值undefined.name会给你一个错误，因为name属性不存在于 上undefined。要解决此问题，您可以检查是否character.length在条件中，然后尝试访问.name。

例子

render() {
    return (
      <div>
         test

          {this.state.character.length && <p>{this.state.character[0].name}</p>}
      </div>
    )
  }

推荐阅读