防止構造函數被多次調用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

回答

相關問題