时间戳

首页 > 解决方案 > 更新在渲染方法中调用的函数的状态值

javascript - 更新在渲染方法中调用的函数的状态值

问题描述

我正在渲染一个函数，该函数在我的反应应用程序中返回一个组件，如下所示

render(){
  return(
    <div>
      {this.renderView()}
    <div>
  )
}

我的渲染视图如下

 renderView() {
   return(
     <HelloPage
       pages={this.state.pageCount}
       showEndPage={true}
       renderResultStats={
         function (stats) {
           if (stats.numberOfPages < 5) {
             this.setState({
               pageCount: stats.numberOfPages
             })
           } else {
             this.setState({
               pageCount: 5
             })
           }
          }.bind(this)
        }
      />
   )
 }

我可以使代码正常工作，但出现控制台错误：

在现有状态转换期间无法更新（例如在 内 render）。渲染方法应该是 props 和 state 的纯函数。

我会使用变量而不是，setState但我无法将更新的pageCount值传递给pages属性，因为它只返回默认值。为了克服这个问题，我使用了setState.

标签： javascriptreactjssetstate

解决方案

您不能直接在渲染函数中更新状态

选项1

componentDidMount(){
    this.setState(state=>({pageNo:5}))
}

选项 2

render(){
  return(
    <HelloPage
                pages={this.state.pageCount}
                showEndPage={true}
                renderResultStats={()=>{this.setState(state=>({pageNo:5}))}}
     />
  );
}

此函数不会自动调用。您可以使用任何事件方法，例如onClick

推荐阅读