React使用useState存储多状态对象时setState返回undefined如何修复

• 你的useState初始值是包含button1、button2两个属性的对象，但调用setClick时直接传入了布尔值!Click.button1，直接把整个状态的类型从对象覆盖成了布尔值。后续再访问Click.button1时，布尔值不存在button1属性，自然返回undefined。
• 另外React状态更新是异步的，你在setClick执行后立刻打印Click.button1，拿到的是本次更新前的旧状态值，所以首次点击会打印初始的false。

方案1：直接合并更新（简单场景适用） #

更新状态时保留原对象的所有属性，仅修改需要切换的字段：

const [Click, setClick] = useState({button1: false, button2: false})

const changeItem = () => {
  setClick({
    ...Click, // 展开原对象，保留button2的状态
    button1: !Click.button1
  })
  // 若需要获取更新后的状态，可通过useEffect监听Click的变化
}

方案2：函数式更新（更稳妥，避免闭包旧值问题） #

如果更新逻辑依赖最新的旧状态，推荐用函数式写法，能保证拿到的永远是最新的前态：

const changeItem = () => {
  setClick(prev => ({
    ...prev,
    button1: !prev.button1
  }))
}

如果两个按钮的状态没有强关联，也可以拆成两个独立的useState，省去对象合并的操作：

const [button1Active, setButton1Active] = useState(false)
const [button2Active, setButton2Active] = useState(false)

const changeItem = () => {
  setButton1Active(prev => !prev)
}

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