Javascript 在渲染之前等待 react-promise 解决
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/42132290/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Wait for react-promise to resolve before render
提问by Edward Smith
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.
所以我有大量数据是从 API 中检索的。我相信问题在于我的组件在从承诺接收数据之前调用了 renderMarkers 函数。
So I am wondering how I can wait for the promise to resolve the data completely before calling my renderMarkers function?
所以我想知道如何在调用我的 renderMarkers 函数之前等待承诺完全解析数据？
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);
回答by Lionel T
You could do something like this to show a Loaderuntil 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>
)
}
}
回答by CodinCat
Calling the render function before the API call is finished is fine. The wellsis an empty array (initial state), you simply render nothing. And after receiving the data from API, your component will automatically re-render because the update of props (redux store). So I don't see the problem.
在 API 调用完成之前调用渲染函数是可以的。这wells是一个空数组（初始状态），您只需渲染任何内容。并且在从 API 接收到数据后，你的组件会因为 props（redux store）的更新而自动重新渲染。所以我没有看到问题。
If you really want to prevent it from rendering before receiving API data, just check that in your render function, for example:
如果你真的想在接收 API 数据之前阻止它渲染，只需在你的渲染函数中检查，例如：
if (this.props.wells.length === 0) {
return null
}
return (
<div id="map" ref="map">
{this.renderMarkers()}
</div>
)
回答by Syed Umer Hasan
So I have the similar problem, with react and found out solution on my own. by using Async/Await calling react Code snippet is below please try this.
所以我有类似的问题，我自己做出反应并找到了解决方案。通过使用 Async/Await 调用 react 代码片段如下，请试试这个。
import Loader from 'react-loader-spinner'
constructor(props){
super(props);
this.state = {loading : true}
}
getdata = async (data) => {
return await data;
}
getprops = async (data) =>{
if (await this.getdata(data)){
this.setState({loading: false})
}
}
render() {
var { userInfo , userData} = this.props;
if(this.state.loading == true){
this.getprops(this.props.userData);
}
else{
//perform action after getting value in props
}
return (
<div>
{
this.state.loading ?
<Loader
type="Puff"
color="#00BFFF"
height={100}
width={100}
/>
:
<MyCustomComponent/> // place your react component here
}
</div>
)
}
