javascript - 如何添加第二个按钮而不导致堆栈崩溃？

Question

import React from 'react';
class App extends React.Component{
  constructor(){
    super()
    this.state = {
      count: 0
    }
    this.clicked = this.clicked.bind(this)
  }
  clicked(){
    this.setState(prevState =>{
      return { 
        count : prevState.count+1
      }


    })
  }
  doubled(){
    this.setState(doubleState =>{
      return { 
        count : doubleState.count+2
      }


    })
  }
  render(){
    return(
      <div>
        <h1>
          {this.state.count}
        </h1>
        <button onClick={this.clicked}>changed</button>
        <button onClick={this.doubled}>changed and doubled</button>
      </div>
    )
  }
}
export default App;

我的问题是:如何添加第二个按钮“加倍”而不崩溃？我是 react 新手，所以请不要责怪。第一个按钮可以正常工作，但是第二个按钮我遇到了一些问题。我应该写第二个类还是它可以在一个类中工作？

Answer 1

您没有绑定(bind) doubled() 函数。这意味着它会在按钮呈现后立即运行。这将依次更新状态，这将重新渲染并导致无限循环渲染，并且您将达到最大调用堆栈限制。

您需要添加 this.doubled= this.doubled.bind(this)