[英]How can I prevent Angular from rendering and displaying a page before ng-if evaluation?
[英]How can I prevent a component from rendering before data is loaded?
我正在等待来自名为GetDealersStore
的商店的道具,我获取数据的方式是我正在执行的操作:
componentWillMount () { GetDealersActions.getDealers(); }
我已经测试了app并且componentWillMount()
在我有这个的初始渲染之前运行
let dealerInfo;
if (this.state.dealerData) {
dealerInfo = this.state.dealerData.dealersData.map((dealer) => {
return (<div>CONTENT</div>);
})
} else {
dealerInfo = <p>Loading . . .</p>
}
但是第一秒你可以看到<p>Loading . . .</p>
<p>Loading . . .</p>
<p>Loading . . .</p>
在屏幕上是上面条件中的else
,然后渲染的其余部分出现return (<div>CONTENT</div>);
这是条件中的if
。 所以,我想,这意味着render方法已经被触发两次,因为它一直在等待来自数据库的数据。
数据库中的数据在第一次渲染时不可用,因此,如何在第一次初始渲染发生之前获取该数据?
您不能使用单个组件执行此操作。 您应该遵循容器组件模式以将数据与呈现分开。
let DealersContainer = React.createClass({
getInitialState() {
return {dealersData: []};
},
componentWillMount() {
GetDealersActions.getDealers();
},
render() {
let {dealersData} = this.state;
return (<div>
{dealersData.map((dealer) => {
let props = dealer;
return (<Dealer ...props />); // pass in dealerData as PROPS here
})}
</div>);
}
});
然后更新您的Dealer
组件以接收道具并呈现实际内容。
我的答案与Mathletics类似,只是更详细。
在这个例子中,我已经将dealerData的状态初始化为null; 这是用于确定容器是否已从商店返回数据的检查。
它是冗长的,但是声明性的,按照你想要的顺序做你想要的,并且它每次都会起作用。
const DealerStore = MyDataPersistenceLibrary.createStore({
getInitialState() {
return {
dealerData: null
};
},
getDealers() {
// some action that sets the dealerData to an array
}
});
const DealerInfoContainer = React.createClass({
componentWillMount() {
DealerStoreActions.getDealers();
},
_renderDealerInfo() {
return (
<DealerInfo {...this.state} />
);
},
_renderLoader() {
return (
<p>Loading...</p>
);
},
render() {
const { dealerData } = this.state;
return (
dealerData
? this._renderDealerInfo()
: this._renderLoader()
);
}
});
const DealerInfo = React.createClass({
getDefaultProps() {
return {
dealerData: []
};
},
_renderDealers() {
const { dealerData } = this.props;
return dealerData.map(({ name }, index) => <div key={index}>{name}</div>);
},
_renderNoneFound() {
return (
<p>No results to show!</p>
);
},
render() {
const { dealerData } = this.props;
return (
dealerData.length
? this._renderDealers()
: this._renderNoneFound()
);
}
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.