在循环内部设置状态时调用的函数

Question

我的渲染中有一个像这样调用的 handlePageClick 函数：

onPageChange={this.handlePageClick}

功能是：

handlePageClick = data => {

    this.setState({
        circleloading: true
    });
    let names = ["page"]
    let values = [data.selected]
    this.updatePublications(names,values)

}

由于某种原因，当我这样做时，函数会被无限调用？为什么？

但是，当我在其他时间调用的其他函数中执行完全相同的操作时，它可以正常工作。所以我想也许函数被“onPageChange”触发的事实有关系。

更新，这是我的 updatePublications 函数：

  updatePublications(names,values){
    let queryParameters = this.generateQueryParametersPackage();
    this.updateQueryParameters(queryParameters,names,values)
    this.pushParameters(names,values);
    let currentComponent = this
    PublicationService.getPublications(queryParameters).then(function (response){
        if(response.status !== StatusCode.OK){
            ErrorService.logError(currentComponent.props,response)
            return;
        }
        currentComponent.setState({
            // other variables ,
            circleloading: false
        })
        currentComponent.updateFilters(queryParameters)
    })
}

updateFilters(queryParameters){
    let currentComponent = this
    PublicationService.getFilters(queryParameters).then(function (response){
        if(response.status !== StatusCode.OK){
            ErrorService.logError(currentComponent.props,response)
            return;
        }
        currentComponent.setState({
            filters: response.data
        })
        currentComponent.hideEmptyFilters(response.data,"locations","filterLocationHeader");
    })
}

Answer 1

使用箭头函数onPageChange={(e) => this.handlePageClick()}，它会触发事件。没有它会触发重新渲染等。SetState 重新渲染，函数在渲染时被调用。

SetState（在 handlePageClick 中）强制重新渲染，然后该函数将被再次调用，因为它只是内联函数而不是箭头函数。

经过一番研究，我发现：

https://stackoverflow.com/a/52849831/12694208

在你的分页组件渲染中

改变

 onPageChange={this.handlePageClick}

到

 onPageChange={(e) => this.handlePageClick(e)}

&&

https://stackoverflow.com/a/52849820/12694208

在您使用点击功能时在您的子组件中更改此项 内部渲染用户箭头功能

onPageChange={(e) => this.handlePageClick()}

两者似乎都支持我的观点。我建议使用箭头功能。

如果您仍有问题，可能是您的 setState({})

页面加载触发：

componentDidMount() {}

重新渲染触发器

componentDidUpdate(prevProps, prevState) {}

在重新渲染之前触发，返回true，你可以返回false，它会阻止重新渲染

shouldComponentUpdate(nextProps, nextState) {}

要进行故障排除，请检查这些，如果更新调用了更改状态的函数，它将无限循环。如果您的组件中没有它们并且箭头功能对您没有帮助，请提供更多详细信息。