gpt4 book ai didi

javascript - 在渲染之前等待 react-promise 解决

转载 作者:可可西里 更新时间:2023-11-01 01:59:35 25 4
gpt4 key购买 nike

因此,我有大量数据是从 API 中检索的。我认为问题在于我的组件在从 promise 接收数据之前调用了 renderMarkers 函数。

所以我想知道如何在调用我的 renderMarkers 函数之前等待完全解析数据的 promise ?

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,直到获取所有信息:

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>
)
}
}

关于javascript - 在渲染之前等待 react-promise 解决,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/42132290/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com