如何在获取数据之前停止组件渲染?
[英] How do I stop a component rendering before data is fetched?
本文介绍了如何在获取数据之前停止组件渲染?的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
目前在反应中，我必须在 componentDidMount 生命周期方法中运行，在该方法中调用获取数据的动作创建者.但是，该组件使用数据，这取决于响应的速度确定数据是否存在.我怎样才能让组件在数据进入之前不呈现?
componentDidMount() {this.props.getTotalHours()this.props.getTrained()}
渲染功能:
render() {let hours = parseInt(_.map(this.props.hours, 'hours'));lettrained = _.map(this.props.trained, 'trained');返回 (<div className="o-layout--center u-margin-top-large"><div className="o-layout__item u-width-1/2@medium u-width-1/4@large"><div style={{width: '80%', margin: '0 auto'}}><饼图数据={小时}目标={100}标签=已完成的培训时间'/>
Action Creator 将请求的返回值存储在应用程序状态:
导出函数 getTotalHours() {const url = `${ROOT_URL}仪表板/小时`const request = axios.get(url)返回 {类型:FETCH_HOURS，有效载荷:请求}}
解决方案
使用 then 或 await 控制异步操作并使用 this.state> 控制您的内容是否被加载.仅在 this.state.loaded === true
之后呈现您的内容
构造函数(道具){超级(道具)this.state = {加载:假}}异步 componentDidMount() {等待 this.props.getTotalHours()等待 this.props.getTrained()this.setState({加载: true})}内容() {let hours = parseInt(_.map(this.props.hours, 'hours'));lettrained = _.map(this.props.trained, 'trained');返回 (<div className="o-layout--center u-margin-top-large"><div className="o-layout__item u-width-1/2@medium u-width-1/4@large"><div style={{width: '80%', margin: '0 auto'}}><饼图数据={小时}目标={100}标签=已完成的培训时间'/>
)}使成为() {返回 (<div>{this.state.loaded ?this.content() : null}
)}
如果您关心 API 调用的性能，可以与 Promise.all 并行运行它们.
异步 componentDidMount() {const 小时 = this.props.getTotalHours()consttrained = this.props.getTrained()等待 Promise.all([小时, 训练])this.setState({加载: true})}
Currently in react I have to functions in the componentDidMount lifecycle method in which call action creators to which fetch data. The component uses the data however, depending on how quick the response is determines if the data is there or not. How can i make it so the component doesn't render before data is inside it?
componentDidMount() {
this.props.getTotalHours()
this.props.getTrained()
}
Render Function:
render() {
let hours = parseInt(_.map(this.props.hours, 'hours'));
let trained = _.map(this.props.trained, 'trained');
return (
<div className="o-layout--center u-margin-top-large">
<div className="o-layout__item u-width-1/2@medium u-width-1/4@large">
<div style={{width: '80%', margin: '0 auto'}}>
<PieChart data={hours} goal={100} label=' Training Hours Completed'/>
</div>
</div>
Action Creator stores returned values from request in the application state:
export function getTotalHours() {
const url = `${ROOT_URL}dashboard/hours`
const request = axios.get(url)
return {
type: FETCH_HOURS,
payload: request
}
}
解决方案
Control your async actions using then or await and use this.state to control whether or not your content gets loaded. Only render your content after this.state.loaded === true
constructor(props) {
super(props)
this.state = {
loaded: false
}
}
async componentDidMount() {
await this.props.getTotalHours()
await this.props.getTrained()
this.setState({loaded: true})
}
content() {
let hours = parseInt(_.map(this.props.hours, 'hours'));
let trained = _.map(this.props.trained, 'trained');
return (
<div className="o-layout--center u-margin-top-large">
<div className="o-layout__item u-width-1/2@medium u-width-1/4@large">
<div style={{width: '80%', margin: '0 auto'}}>
<PieChart data={hours} goal={100} label=' Training Hours Completed'/>
</div>
</div>
)
}
render() {
return (
<div>
{this.state.loaded ? this.content() : null}
</div>
)
}
edit: If you care about performance in your API calls, you can run them in parallel with Promise.all.
async componentDidMount() {
const hours = this.props.getTotalHours()
const trained = this.props.getTrained()
await Promise.all([hours, trained])
this.setState({loaded: true})
}
这篇关于如何在获取数据之前停止组件渲染?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
