如何在没有堆栈折叠的情况下添加第二个按钮？

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;

我的问题是：如何添加第二个按钮 "doubled" 而不会崩溃？我是反应的新手，所以请不要责怪。第一个按钮可以使用，但是第二个按钮我遇到了一些问题。我应该写第二个 class 还是它可以在一个 class 中工作？

Answer 1

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

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

如何在没有堆栈折叠的情况下添加第二个按钮？

How to add second button without stack collapse?

javascript

state

class

setstate

reactjs