时间戳

首页 > 解决方案 > 如何在不折叠堆栈的情况下添加第二个按钮？

javascript - 如何在不折叠堆栈的情况下添加第二个按钮？

问题描述

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;

我的问题是：如何在不崩溃的情况下添加第二个按钮“加倍”？我是新手，所以请不要责怪。第一个按钮工作，但第二个我有一些问题。我应该写第二节课还是可以在一节课中工作？

标签： javascriptreactjsclassstatesetstate

解决方案

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

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

推荐阅读