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

【问题标题】：(React) this.setState(current=>--current.number) works but this.setState(current=>current.number+1) won't work（反应） this.setState(current=>--current.number) 有效，但 this.setState(current=>current.number+1) 无效
【发布时间】：2021-05-07 18:40:13
【问题描述】：

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)）时的剂量

【问题讨论】：

在您的函数版本中，您没有返回新状态，只是返回数字。
所以两者都只返回一个数字，但--currrent.number 更改了一个数字并返回它......这就是区别吧？
两者都不能正常工作。状态以 object 开始，但您随后将其设置为 number。此外，在您的浏览器控制台中尝试此操作：foo = (x)=>--x.current; bar = 3; console.log(foo(bar)); console.log(bar); 它并没有按照您的想法执行...

标签： javascript reactjs state setstate

【解决方案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>

【讨论】：

这仍然会减少旧状态下的number。 prev =>({number: --prev.number}) 应替换为 prev => ({ number: prev.number - 1 })
你说得对，达斯汀。当时我正在写这篇文章，我只是想表明我是双向的。另外我认为预递减会返回另一个新实例。但我看到它改变了我们不想要的值。