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

Question

我有这样的默认状态

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

以上一切正常。但是我没有使用点击事件实现切换标签。

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

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

为什么？

Answer 1

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

来完成此操作

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

或

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


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