与增加和减少反应中的计数器有关的基本问题

Question

这是一道基础题。我已经开始学习 React 并且我有一个作业，我必须通过递增和递减按钮来更改值。我已经使用 class 组件方式实现了它。

但我有疑问。请参考以下代码更改值的位置。

increment = () => {
    this.setState({
      count: this.state.count + 1   //HERE -----------------
    });
  };

为什么不是这样??

increment = () => {
    this.setState({
      this.state.count: this.state.count + 1    // Here ...ERROR COMES
    });
  };

那么为什么不能像this.state.count那样访问：this.state.count + 1 ?? 请告诉我原因。

Answer 1

之所以不起作用，是因为在对象内赋值的语法与普通变量赋值的语法不同。

详细说明：

创建对象时使用以下语法：

let myObj = {
  foo: 'bar'
}

或者你可以这样做：

let myObj = {}

myObj.foo = 'bar'

但你做不到

let myObj = {
  myObj.foo: 'bar'
}

您使用 setState 函数所做的是创建一个新对象并将其传递给函数。

你应该像这样简单地写它：

const newState = { count: this.state.count + 1 }
this.setState(newState);

这就是您必须使用第一种语法的原因。

然后 setState 所做的是将您给它的对象与当前 this.state 合并，在下一次渲染中 this.state 将包含更新的值。

basic question related to increment and decrement the counter in react