[英]How can I prevent a component from rendering before data is loaded?
I am waiting the props to come up from a store named GetDealersStore
, and the way I am fetching that data is with an action where I am doing this: 我正在等待来自名为GetDealersStore
的商店的道具,我获取数据的方式是我正在执行的操作:
componentWillMount () { GetDealersActions.getDealers(); }
I already test the app and componentWillMount()
is running before the initial render where I have this 我已经测试了app并且componentWillMount()
在我有这个的初始渲染之前运行
let dealerInfo;
if (this.state.dealerData) {
dealerInfo = this.state.dealerData.dealersData.map((dealer) => {
return (<div>CONTENT</div>);
})
} else {
dealerInfo = <p>Loading . . .</p>
}
but for the first second you can see <p>Loading . . .</p>
但是第一秒你可以看到<p>Loading . . .</p>
<p>Loading . . .</p>
<p>Loading . . .</p>
in the screen which is the else
in the conditional above, and then the rest of the render comes up with return (<div>CONTENT</div>);
<p>Loading . . .</p>
在屏幕上是上面条件中的else
,然后渲染的其余部分出现return (<div>CONTENT</div>);
which is the if
in the conditional. 这是条件中的if
。 So, I guess, this means that the render method has been trigger twice because it keeps waiting for the data coming from the database. 所以,我想,这意味着render方法已经被触发两次,因为它一直在等待来自数据库的数据。
The data from the database is not available at the time of the 1st render, so, how can I fetch that data before the 1st initial render occurs? 数据库中的数据在第一次渲染时不可用,因此,如何在第一次初始渲染发生之前获取该数据?
You can't do this with a single component. 您不能使用单个组件执行此操作。 You should follow the Container Component pattern to separate data from rendering. 您应该遵循容器组件模式以将数据与呈现分开。
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>);
}
});
Then update your Dealer
component to receive props and render the actual content. 然后更新您的Dealer
组件以接收道具并呈现实际内容。
My answer is similar to Mathletics', just in more detail. 我的答案与Mathletics类似,只是更详细。
In this example I've included initialising state of dealerData to null; 在这个例子中,我已经将dealerData的状态初始化为null; this is the check that's made to determine whether the data has been returned from the store by the container. 这是用于确定容器是否已从商店返回数据的检查。
It's verbose, but declarative, and does what you want, in the order that you want, and it will work each time. 它是冗长的,但是声明性的,按照你想要的顺序做你想要的,并且它每次都会起作用。
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.