我有这样的默认状态
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>
为什么?
最佳答案
发生此错误是因为您的 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>
关于javascript - onClick 处理程序在每个渲染周期触发,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/43154326/