Question

我已经尝试过这个答案

import React from "react";

class App extends React.Component {
  constructor() {
    super();
    this.state = {
      count: 0,
    };
    this.increment = this.increment.bind(this);
  }

  increment() {
    this.setState({
      count: this.state.count++,
    });
  }
  render() {
    return (
      <div>
        <h1>{this.state.count}</h1>
        <button onClick={this.increment}>Change!</button>
      </div>
    );
  }
}

export default App;

我意识到当我只是改变增量功能时，一切都很好

increment(){
  this.setState({
      count:this.state.count+1
})}

我想知道为什么当使用this.state.count + 1而不使用this.state.count ++时，increment（）可以工作。

Answer 1

当您在postfix中使用增量/减量运算符时，返回值是变量之前，它已被更新。但是，如果要在前缀中使用它，它将进行更新，然后返回结果。使用❯ readelf -l main Elf file type is EXEC (Executable file) Entry point 0x401020 There are 11 program headers, starting at offset 64 Program Headers: Type Offset VirtAddr PhysAddr FileSiz MemSiz Flags Align PHDR 0x0000000000000040 0x0000000000400040 0x0000000000400040 0x0000000000000268 0x0000000000000268 R 0x8 INTERP 0x00000000000002a8 0x00000000004002a8 0x00000000004002a8 0x000000000000001c 0x000000000000001c R 0x1 [Requesting program interpreter: /lib64/ld-linux-x86-64.so.2] LOAD 0x0000000000000000 0x0000000000400000 0x0000000000400000 0x00000000000004c0 0x00000000000004c0 R 0x1000 ...的方式与此类似，因为它使用count的值，将其加1，然后返回结果。

您可以简单地通过跳入浏览器控制台并进行以下实验来进行测试：

l_addr

总结：

使用count + 1会将原始值返回到a=1; console.log(a++); //returns 1 console.log(a); //returns 2 b=1; console.log(++b); //returns 2 console.log(b); //returns 2
使用this.state.count++将原始值+1返回到setState()

This short article解释得很好。

我希望能帮上忙。

Answer 2

问题

问题在于应用操作的顺序以及增量的工作方式。在您的情况下，它是（大致上，像GetValue抽象操作这样的事情正在发生），如下所示：

在[[Get]]上调用了内部this.state.count方法
在[[Set]]上调用内部this.state.count方法，结果为步骤1 + 1
在[[Set]]上使用旧值调用内部({}).count方法

因此，在第3步之后，您的状态为{ count: 1 }，对象为{ count: 0 }

setState

在setState的幕后，React会执行以下操作（再次大致）：

使用组件enqueueSetState上第3步中的对象调用updater，将其推入状态更新队列。
状态更新后，会在遍历新的部分状态的循环中对旧状态调用Object.assign()，从而将count覆盖为0。

解决方案

如评论中所述，切换到前缀增量，如步骤3所示，返回的值将是新值：

{ count : ++this.state.count }

参考

MDN上的增量引用
内部方法spec
后缀增量spec
前缀增量spec
Object.assign()在MDN上的引用

为什么this.state.count ++在this.setState（{}）中不起作用

2 个答案: