时间戳

首页 > 解决方案 > React.js，从api中拉取数据然后循环显示

reactjs - React.js，从api中拉取数据然后循环显示

问题描述

我是新来的反应。我正在尝试从 API 中提取数据，然后循环并显示它。错误：无法读取未定义的属性“地图”。

API 数据正在通过，但似乎 React 在数据存储到 State 之前调用了循环列表。

  constructor () {
super()
this.state = {
  data:'',
}

}

componentWillMount(){
 // Im using axios here to get the info, confirmed data coming in.

//更新“数据”状态以等于来自 api 调用的响应数据。

}

loopListings = () => {
   return this.state.data.hits.map((item, i) => {
     return(<div className="item-container" key={i}>
      <div className="item-image"></div>
      <div className="item-details">tssss</div>
      </div>)
    })
  }

  loopListings = () => {
return this.state.data.hits.map((item, i) => {
  return(
    <div className="item-container" key={i}>
      <div className="item-image"></div>
      <div className="item-details">tssss</div>
    </div>)
})


 }


  render () {
    return (
      <div>
          {this.loopListings()}

      </div>
        )
      }

标签： reactjs

解决方案

您收到此错误的原因是您对 API 的调用与反应生命周期方法异步发生。当 API 响应返回并持续到状态时，render 方法已经被第一次调用并且由于您试图访问尚未定义的对象上的属性而失败。

为了解决这个问题，您需要确保在 API 响应被持久化到状态之前，渲染方法不会尝试访问渲染方法中的那部分状态，或者确保如果确实存在构造函数中的有效默认状态：

通过改变你的渲染来解决这个问题：

render () {
    return (
      <div>
      {this.state.data && 
        Array.isArray(this.state.data.hits) 
         && this.loopListings()}
      </div>
        )
      }

或像这样初始化您的构造函数：

constructor () {
      super()
      this.state = {
       data: {hits: []},
      }
    }

记住 react 只是 javascript，它的行为是一样的。

推荐阅读