React setState hook回调中previous参数值不一致问题求助

• 浏览器控制台的惰性求值机制：你打印引用类型（对象、数组）时，控制台仅在输出初始快照时记录基本类型值，引用类型的属性会在你手动点击展开对象时才从内存中读取最新值。你看到的未展开的existing属性预览、直接访问的existing.nocolor、克隆对象的属性都是setState回调执行时的真实值（单元素数组），后续其他代码修改了该对象的nocolor属性，导致你点击展开existing对象时读取到了修改后的双元素数组，形成了值不一致的错觉。
• React状态非法突变：你更新currentPicturesObject状态时未遵守不可变更新原则，存在直接修改原状态对象属性的操作，导致同一个引用的状态对象在回调执行后被篡改，触发了上述控制台打印的不一致问题。

• 全量排查所有修改currentPicturesObject的代码，所有状态更新都必须返回全新的对象，禁止直接修改原状态的属性或子属性：
  错误示例：

setCurrentPicturesObject(prev => {
  prev.nocolor.push('new-img-url') // 直接修改原状态引用，属于非法突变
  return prev
})

正确示例：

setCurrentPicturesObject(prev => {
  // 对每一层需要修改的引用都创建新值，不修改原对象
  return {
    ...prev,
    nocolor: [...prev.nocolor, 'new-img-url']
  }
})

• 如果你需要确认代码执行时刻的对象真实值，可对打印对象做序列化处理，规避控制台惰性求值的干扰：

console.log(JSON.parse(JSON.stringify({
  existing,
  existingdotNocolor: existing.nocolor,
  selectedColorState,
  selectedColorArray: existing["nocolor"],
  clone
})))

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