React state数组类型计数器增减操作报错修复

你的代码存在两个核心错误，直接触发了React警告和运行时报错：

• 状态更新类型不匹配：bank初始值是包含4个计数项的数组，但你在setState时直接将单个数字赋值给bank字段。第一次触发up操作时，this.state.bank[0]为0，加1得到数值1，执行setState({ bank: 1 })后，bank字段就从长度为4的数组变成了数字类型的1。第二次操作尝试读取this.state.bank[currentBank]时，相当于在数字值上访问索引属性，直接抛出Cannot create property '0' on number '1'的运行时错误。
• 直接修改原始state：你代码中写的this.state.bank[currentBank] = 0属于直接修改state上原数组的违规操作，违反React的state不可变原则。这个赋值表达式会优先执行，直接改动原state存储的数组内容，再将等号右侧的0/9作为返回值传给setState，本质上还是把bank替换成了单个数字，这就是React提示存在直接修改state操作的原因。

更新数组类型的state时，必须先创建原数组的浅拷贝，修改拷贝中对应索引的数值后，再把完整的新数组传给setState。不要直接修改原state上的数组引用，也不要将数组类型的state字段替换为其他类型的值。
修复后的updateCounters函数代码如下：

updateCounters() {
  // 生成原bank数组的浅拷贝，避免直接修改原state
  const newBank = [...this.state.bank];
  const currentCounterVal = newBank[currentBank];

  if (parsedJsonData.up) {
    newBank[currentBank] = currentCounterVal < 9 ? currentCounterVal + 1 : 0;
    this.setState({ bank: newBank });
  } else if (parsedJsonData.down) {
    newBank[currentBank] = currentCounterVal > 0 ? currentCounterVal - 1 : 9;
    this.setState({ bank: newBank });
  }
}

额外说明：你将currentBank作为组件实例属性存储、不放入state的写法是完全可行的，只有数据变化需要触发组件重渲染时，才需要将对应值存入state，这部分逻辑没有问题。

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