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

【问题标题】：Prevent constructor from getting called multiple times React防止构造函数被多次调用 React
【发布时间】：2017-06-01 14:48:08
【问题描述】：

在我的用例中：我正在进行分页，我只在后续分页调用中第一次调用 api 时接收数据，我只接收分页数据。

如何在 React Component 中保存我以前的数据，因为我正在重新渲染组件，因此构造函数被调用

我的代码：

    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

【问题讨论】：

你看过prevState了吗？（见facebook.github.io/react/docs/state-and-lifecycle.html）
这对我有什么帮助？
您需要在父组件的构造函数中使用一个状态对象来跟踪它——在您的情况下为this.settlementData（我假设它在您发布的代码之前）。不过，它应该看起来像这样：this.state = { settlementData: {} }。然后在用户进入下一页时触发的方法中，将this.state 修改为this.setState((prevState, props) => ({ settlementData: {} })。我会做出正式的回答，但我需要一个可以使用的小提琴才能真正了解您的代码在做什么。

标签： reactjs pagination

【解决方案1】：

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

在您的父组件中声明字段以保存可以恢复的子级状态：

controlStates = {};

在您的子组件中接受对 props 中父组件的引用（或者如果您不想将 sttes 存储在直接父级中，则通过 context 获取它）。

然后你可以在构造函数中恢复你的状态：

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

【讨论】：