javascript - （反应） this.setState(current=>--current.number) 有效，但 this.setState(current=>current.number+1) 无效

Question

class App extends React.Component{
  state = {
    number:0
  };
  ADD = ()=>{
    this.setState(current=>current.number+1)
  };
  MINUS = ()=>{
    this.setState(current=>--current.number);
  };
  render(){
    return(
      <div>
        <h1>Number is: {this.state.number}</h1>
        <button onClick={this.ADD}>Add</button>
        <button onClick={this.MINUS}>Minus</button>
      </div>
      );
  }
}

上面的代码是使用的类组件ReactDOM.render(<App/>,docment.querySelector('#root'));

current=>--current.number效果很好但current=>current.number-1不起作用

我分不清两者的区别

另外，我想知道setState当它foo作为参数时使用什么方法this.setState(foo)

标签： javascriptreactjsstatesetstate

Answer 1

我做了一些小改动，它的工作原理

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

  ADD() {
    this.setState(prev =>({number: prev.number + 1}))
  }
  MINUS() {
    this.setState(prev =>({number: prev.number - 1}));
  }

  render() {
    return ( 
    <div >
      <h1> Number is: {
        this.state.number
      } 
      </h1> 
      <button onClick = {
        ()=>this.ADD()
      } > Add < /button> 
      <button onClick = {
        ()=>this.MINUS()
      } > Minus </button> 
      </div>
    );
  }
}

ReactDOM.render( 
<Counter/> ,
  document.getElementById('app')
);

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