React类组件调用setState时state内count值无法自增的问题

问题根因 #

你的代码中count值无法递增，核心是两个错误叠加导致的：

1. 错误使用后置自增运算符++：后置自增x++的返回值是自增执行前的原始值，不是自增后的新值
2. 违反React state修改规则：直接对this.state.count做赋值操作，且连续赋值的最终结果始终是count的初始值，相当于每次点击都把count设置为0

你当前的onClick逻辑执行流程（初始count=0时）：

• 首先执行this.state.count++：先返回count的原始值0，再临时把count改为1
• 接着执行this.state.count = 上一步返回的0：直接修改state把count又改回0，这步操作不会触发组件重渲染
• 整个赋值表达式最终返回值为0，setState接收到的更新值是{count: 0}，因此每次点击后count始终是0

排查指引 #

• 检查自增运算符的返回值逻辑：后置i++返回原值，前置++i才返回自增后的值
• 检查是否存在直接修改state的行为：React类组件禁止直接给this.state.xxx赋值，所有state变更必须通过setState传入新值完成，直接修改state不会触发组件重渲染，还会导致状态不一致
• 检查setState接收的更新值是否符合预期：可以在setState调用前打印传入的值，确认是否是你预期的递增后数值

正确修复方案 #

基础写法（简单场景适用） #

直接基于当前state计算新值传入setState即可，不要修改原state：

<button onClick={() => {
  this.setState({ count: this.state.count + 1 })
}}>You Clicked This : {this.state.count} Times.</button>

推荐写法（所有场景兼容） #

由于React的setState是异步批量更新的，当多次连续触发更新时，直接读取this.state.count可能拿到旧值导致计算错误，使用函数式更新可以保证拿到的前序状态是最新的：

<button onClick={() => {
  this.setState(prevState => ({ count: prevState.count + 1 }))
}}>You Clicked This : {this.state.count} Times.</button>

注意：任何场景下都不要直接修改this.state上的属性，即使后续调用了setState，这类写法也会引发状态更新异常、组件不重渲染、生命周期触发错乱等问题。

内容的提问来源于stack exchange，提问作者Abhimanyu Sharma