在每个渲染周期触发onClick处理程序

小编典典

在每个渲染周期触发onClick处理程序

reactjs

我有这样的默认状态

this.state = {
  selectedTab : 'tab1'
}

然后

我的渲染方法是这样的

render(){
   const { selectedTab } = this.state;
   return(
      <li>tab1</li><li>tab2</li>
      <div id="content">
         {selectedTab == 'tab1' ? this.renderTab1Content() : this.renderTab2Content()}
      </div>
   )
}

一切都在上面。但是我无法使用click事件实现switch选项卡。

我试图在我的绑定onclick事件li以更改selectedTab的状态，但出现无限循环错误。像这样

<li onClick={this.setState({selectedTab :'tab1'})}>Tab 1</li>
<li onClick={this.setState({selectedTab :'someothertab'})}>Tab 2/li>

为什么？

阅读 261

2020-07-22

共1个答案

小编典典

发生此错误是因为您的onClick处理程序需要一个函数，但是您已在事件上调用了setState语句，因此每次使用更改状态时setState，都会onClick再次调用render，因此再次调用setState会触发无限循环。您可以通过使用arrow functionin onClick事件或调用单独的函数来执行此操作

<li onClick={() => this.setState({selectedTab :'tab1'})}>Tab 1</li>

要么

handleClick = () =>{
    this.setState({selectedTab :'tab1'})
}


<li onClick={this.handleClick}>Tab 1</li>

2020-07-22