防止构造函数被多次调用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

来源

2017-06-01 meena

你看'prevState'了吗？（请参阅https://facebook.github.io/react/docs/state-and-lifecycle.html） –

这对我有何帮助？ – meena

您需要父组件的构造函数中的状态对象来跟踪您的案例中的this.settlementData（我假设您已发布代码的前面）。它应该看起来像这样：'this.state = {settlementData：{}}'。然后在用户进入下一页时触发的方法中，用'this.setState（（prevState，props）=>（{settlementData：{}}）'修改'this.state'。官方的答案，但我需要一个小提琴，我可以合作，真正看到你的代码在做什么。 –

可能的解决方案是将状态存储在父组件中。例如。

在你父组件声明字段来保存，可以恢复孩子们的状态：

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; 
}

来源

2017-06-01 06:40:37 Amid

防止构造函数被多次调用React

回答

相关问题