Question

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

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

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

}

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

//更新'data'状态以等于来自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>
        )
      }

Answer 1

你可以检查状态中是否存在desir data.hits。

{this.state.data && Array.isArray(this.state.data.hits) ? 
     this.loopListings()
     : null}

还要确保在检索数据后调用this.setState方法，如下所示。

this.setState({ data })

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

1 个答案: