防止构造函数被多次调用React
问题描述:
在我的用例中:我正在做分页,因为我只在我的第一次调用api时收到数据,后来的分页调用中我只接收分页数据。防止构造函数被多次调用React
如何保存在我以前的数据做出反应成分,因为我重新呈现组件再次因此构造函数获取调用
我的代码:
componentWillMount() {
this.props.dispatch(getSettlementDetails(this.state.settlementParams));
}
componentWillUpdate(nextProps) {
if(!_.isEmpty(this.props.settlementData) && this.props.settlementData.totalTransactions) {
this.settlementData = this.props.settlementData
}
}
render() {
let pageDetails = {
innerPage: true,
tab: 'Settlements',
breadCrumbData: [{
tab: 'Settlements',
url: 'settlements/'
}, {
tab: 'Details',
url: 'settlements/'+this.props.params.id
}]
}
let downloadProgress;
/**
* This is to show or hide download progress
*/
if(this.props.excelQueue.exportFilterData.showDownloadProgress) {
downloadProgress = (<DownloadProgress/>)
}
if(_.isEmpty(this.settlementData)) {
this.settlementData = this.props.settlementData
}
if (this.props.settlement.fetching) {
return (
<div>
<Header pageDetails={pageDetails}/>
<div class="main-container">
<div>
Loading.....
</div>
</div>
</div>
)
} else if(this.props.settlement.fetched){
return (
<div>
<Header pageDetails={pageDetails}/>
<div class="main-container">
<div>
<SettlementDetail settlementDataPagination={this.props.settlementData} settlementData={this.settlementData} transactionList={this.props.settlementData.transactionListForSettlementDetailDTOListV1}
downloadFile={this.download.bind(this)} dispatchMethod={this.callPaginationApi}/>
</div>
</div>
{downloadProgress}
</div>
)
} else {
return (
<div>
<Header pageDetails={pageDetails}/>
<div class="main-container">
<div>
No Data
</div>
</div>
</div>
)
}
}
现在我存储上次值this.settlementData
但是PaginationComponent重新调用它内部的constructor
答
可能的解决方案是将状态存储在父组件中。例如。
在你父组件声明字段来保存,可以恢复孩子们的状态:
controlStates = {};
在你的子组件接受道具参考父组件(或者通过context得到它,如果你不想在直接父母中存储sttes)。
然后你就可以在构造函数中恢复状态:
if (!!props.parent)
{
this.state = props.parent.controlStates[props.id];
}
和componentWillUnmount或componentDidUpdate保存:
if (!!this.props.parent)
{
this.props.parent.controlStates[this.props.id] = this.state;
}
你看'prevState'了吗? (请参阅https://facebook.github.io/react/docs/state-and-lifecycle.html) –
这对我有何帮助? – meena
您需要父组件的构造函数中的状态对象来跟踪您的案例中的this.settlementData(我假设您已发布代码的前面)。它应该看起来像这样:'this.state = {settlementData:{}}'。然后在用户进入下一页时触发的方法中,用'this.setState((prevState,props)=>({settlementData:{}})'修改'this.state'。官方的答案,但我需要一个小提琴,我可以合作,真正看到你的代码在做什么。 –