Question

在React中我试图使按钮增加存储在状态中的值。但是使用下面的代码功能。当我点击“minusbutton”或“plusbutton”时，使用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'，如下图所示：

enter image description here

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

Answer 1

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

Answer 2

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

1）状态正在通过基于回调的this.setState进行变异，以避免在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

此<Button />文件中未导入JSX个组件。我认为你的意思是<button></button>，如果你没有使用react 16，请不要忘记render() return中的包装元素。你可以看到它在代码片段中没有问题：

"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>

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

3 个答案: