使用ReactJS输出'NaN'递增状态值

Question

在React中，我试图使按钮增加一个状态存储的值。 但是使用下面的代码功能。 当我单击“减号按钮”或“加号按钮”，并且使用buttonplus_quantity和buttonminus_quantity时，输出为“ 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");
    }
}

和Render() ：

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

如下图所示，单击时的输出为“ NaN”：

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

Answer 1

您无法重新绑定箭头功能。 我认为问题出在您绑定功能上。 这是带有您的代码的工作笔： https : //codepen.io/danegit/pen/EbvopX?editors=0010
如dhilt所指出的，如果您依靠前一个状态来更新下一个状态，也可以使用功能性setState 。
编辑另外，您只能在其中渲染一个孩子，从而render的代码根本无法运行。 如果可能，请始终粘贴完整的代码。

Answer 2

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

1）通过基于回调的this.setState来更改状态，以避免在this.setState({num_quantity: this.state.num_quantity++});期间无法考虑到其他一些状态更改的情况this.setState({num_quantity: this.state.num_quantity++}); 分配;

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

3）要点（感谢@Dane） -提供处理程序，而不是属性函数（更换箭头功能类方法） -使一个构造函数实例this绑定工作。

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>
  );
}

Answer 3

在此JSX文件中没有导入<Button />组件。 我认为您的意思是<button></button> ，如果您不使用react 16请不要忘记render() return wrapper元素。 如您所见，它在代码段中正常工作：

 "use strict"; class EnterOrder extends React.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"); } render() { let {num_quantity} = this.state; return ( <div> <button onClick = {this.buttonminus_quantity} name = "minus" id = "minus" value = "-" > - </button> <p id = 'num' > {this.state.num_quantity} </p> <button onClick = {this.buttonplus_quantity} name = "plus" id = "plus" value = "+" > + </button> </div> ); } } ReactDOM.render( <EnterOrder / > , document.getElementById('app')) 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script> <div id="app"></div>