在渲染之前等待react-promise解决 [英] Wait for react-promise to resolve before render

问题描述

所以我有一大堆数据，我正在从API中检索。我认为问题是我的组件在从promise接收数据之前调用renderMarkers函数。

So I have a large set of data that I'm retrieving from an API. I believe the problem is that my component is calling the renderMarkers function before the data is received from the promise.

所以我想知道如何等待承诺解决完全在调用我的renderMarkers函数之前的数据？

So I am wondering how I can wait for the promise to resolve the data completely before calling my renderMarkers function?

class Map extends Component {

componentDidMount() {
  console.log(this.props)
  new google.maps.Map(this.refs.map, {
    zoom: 12,
    center: {
      lat: this.props.route.lat,
      lng: this.props.route.lng
    }
  })
}

componentWillMount() {
  this.props.fetchWells()
}

renderMarkers() {
  return this.props.wells.map((wells) => {
    console.log(wells)
  })
}

render() {
  return (
    <div id="map" ref="map">
      {this.renderMarkers()}
    </div>
  )
 }
} 

function mapStateToProps(state) {
  return { wells: state.wells.all };
}

export default connect(mapStateToProps, { fetchWells })(Map);

推荐答案

你可以做这样的事情来展示 Loader 直到获取所有信息：

You could do something like this to show a Loader until all the info is fetched:

class Map extends Component {
  constructor () {
    super()
    this.state = { wells: [] }
  }

  componentDidMount() {
    this.props.fetchWells()
      .then(res => this.setState({ wells: res.wells }) )
  }

  render () {
    const { wells } = this.state
    return wells.length ? this.renderWells() : (
      <span>Loading wells...</span>
    )
  }
}

这篇关于在渲染之前等待react-promise解决的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！