Javascript 使用ReactJS输出“NaN”递增状态值

在React中，我试图使按钮增加存储在状态中的值。但是，请使用下面的代码函数。当我单击Minus按钮或plusbutton，使用buttonplus\u数量和buttonminus\u数量时，输出为“NaN”

这是我的密码：

class EnterOrder extends Component {

    constructor(props) {
      super(props)
      this.buttonplus_quantity = this.buttonplus_quantity.bind(this);
      this.buttonminus_quantity = this.buttonminus_quantity.bind(this);

      this.state= {
          num_quantity :0
      }

      buttonplus_quantity=()=>{
      this.setState({num_quantity: this.state.num_quantity +1});
      console.log("a");
    }

    buttonminus_quantity=()=>{
      this.setState({num_quantity: this.state.num_quantity -1});
      console.log("b");
    }
}

以及渲染：

当我点击时，输出为“NaN”，如下图所示：

---

我做错了什么？非常感谢你们的帮助

我将重构组件的代码以满足下一个需求：

1状态正在通过基于this.setState的回调进行变异，以避免在此期间出现无法考虑的其他状态更改的情况。setState{num_quantity:this.state.num_quantity++；任务

2 render方法用一个根元素包装，如果是React v16，它也可以是一个元素数组

3由于@Dane（为处理程序提供类方法，而不是属性函数代替箭头函数）使构造函数实例能够使用此绑定，这一点非常重要

constructor(props) {
  super(props)
  this.buttonplus_quantity = this.buttonplus_quantity.bind(this)
  this.buttonminus_quantity = this.buttonminus_quantity.bind(this)
  this.state= {
      num_quantity :0
  }
}

buttonplus_quantity() {
  this.setState(prevState => ({
    num_quantity: prevState.num_quantity++
  }));
}

buttonminus_quantity() {
  this.setState(prevState => ({
    num_quantity: prevState.num_quantity--
  }));
}

 render() {
   return (
    <span>
      <Button onClick={this.buttonminus_quantity} value="-">-</Button>
      <p id='num'>{this.state.num_quantity}</p>
      <Button onClick={this.buttonplus_quantity} value="+">+</Button>
    </span>
  );
}

---

无法重新绑定箭头函数。我认为问题在于你绑定了这些函数。这是带有代码的工作笔： 正如dhilt所指出的，如果您依赖于前一个状态来更新下一个状态，也可以使用。 还可以编辑您只能在内部渲染一个子级渲染问题中的代码根本不会运行。如果可能，请始终粘贴完整代码。

此JSX文件中没有导入任何组件。我想您的意思是，如果您没有使用react 16，请不要忘记render return中的包装器元素。正如您所看到的，它在代码段中工作没有问题：

严格使用； 类EnterOrder扩展了React.Component{ 构造器{ 超级作物 this.buttonplus\u quantity=this.buttonplus\u quantity.bindthis； this.buttonminus\u数量=this.buttonminus\u数量.bindthis； 此.state={ 数量：0 } } 按钮按钮数量==>{ 这是我的国家{ num\u数量：this.state.num\u数量+1 }; console.loga； } 按钮分钟数量==>{ 这是我的国家{ num_数量：this.state.num_数量-1 }; console.logb； } 渲染{ 设{num_quantity}=this.state； 回来 -

{this.state.num\u quantity}

+ ; } } ReactDOM.render，document.getElementById'app'

---

使用parseIntthis.state.num_quantityRather parseIntthis.state.num_quantity，10将状态中的值转换为实际值。非常感谢您的帮助，但是我可以在何处添加此parseIntthis.state.num_quantity，10因为我正在添加

parseInt{this.state.num_quantity}，10

它不起作用。抱歉，伙计们。parseInt不重要，因为没有字符串输入；所有num_数量分配都是数字。您共享的代码必须不完整。渲染函数应始终返回一个根元素。你不能返回两个按钮作为根。当然！我是瞎子。。。箭头函数只是函数属性，而不是类方法。它们不能以OP正在执行的方式绑定到实例对象。。。

constructor(props) {
  super(props)
  this.buttonplus_quantity = this.buttonplus_quantity.bind(this)
  this.buttonminus_quantity = this.buttonminus_quantity.bind(this)
  this.state= {
      num_quantity :0
  }
}

buttonplus_quantity() {
  this.setState(prevState => ({
    num_quantity: prevState.num_quantity++
  }));
}

buttonminus_quantity() {
  this.setState(prevState => ({
    num_quantity: prevState.num_quantity--
  }));
}

 render() {
   return (
    <span>
      <Button onClick={this.buttonminus_quantity} value="-">-</Button>
      <p id='num'>{this.state.num_quantity}</p>
      <Button onClick={this.buttonplus_quantity} value="+">+</Button>
    </span>
  );
}