使用React将状态值递增1

Question

在React中，我试图使按钮增加一个状态存储的值。但是，使用下面的代码使用handleClick时，我的值设置为undefined或NaN。

class QuestionList extends React.Component {
  constructor(props) {
    super(props);
    this.state = {value: 0};

    // This binding is necessary to make `this` work in the callback
    this.handleClick = this.handleClick.bind(this);
  }

   handleClick = (prevState) => {
    this.setState({value: prevState.value + 1});
    console.log(this.state.value)
  }

你能告诉我为什么会这样吗？根据此处的文档，它应该是正确的：https : //facebook.github.io/react/docs/state-and-
lifecycle.html

Answer 1

因为您使用的handleClick函数不正确。这里：

handleClick = (prevState) => { .... }

prevState 将是传递给handleClick函数的事件对象，您需要将prevState与setState一起使用，如下所示：

handleClick = () => {
    this.setState(prevState => {
       return {count: prevState.count + 1}
    })
}

另一个问题是，setState是异步的，因此console.log(this.state.value)不会打印更新后的状态值，您需要对setState使用回调函数。

检查有关setState异步行为以及如何检查更新值的更多详细信息。

检查工作解决方案：

class App extends React.Component {



   constructor(props){

       super(props);

       this.state={ count: 1}

   }



  onclick(type){

      this.setState(prevState => {

         return {count: type == 'add' ? prevState.count + 1: prevState.count - 1}

      });

  }



   render() {

    return (

      <div>

        Count: {this.state.count}

        <br/>

        <div style={{marginTop: '100px'}}/>

        <input type='button' onClick={this.onclick.bind(this, 'add')} value='Inc'/>

        <input type='button' onClick={this.onclick.bind(this, 'sub')} value='Dec'/>

       </div>

     )

   }

}



ReactDOM.render(

  <App />,

  document.getElementById('container')

);


<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='container'></div>