React useState如何批量更新对象属性为true并触发组件重渲染

直接修改对象属性不触发重渲染是React state的更新机制决定的：

• React判定state是否更新用浅比较规则，只有传入setState的新值和旧值引用地址不同时，才会触发组件重渲染
• 你之前的写法直接在原elements对象上修改属性，对象本身的内存地址没有变化，React会判定state没有更新，自然不会触发重渲染
• 额外提醒：你初始化state用的是外部import的模块常量，直接修改这个对象还会污染模块源数据，影响所有引用该常量的其他逻辑

更新对象类型的state时，必须返回一个全新创建的对象，禁止直接修改原state。推荐使用函数式更新写法，避免拿到过期的state值：

// 按钮点击触发的回调方法
const handleButtonClick = () => {
  setElements(prevElements => {
    // 创建全新空对象，遍历旧state的所有key赋值为true
    const updatedElements = {}
    Object.keys(prevElements).forEach(key => {
      updatedElements[key] = true
    })
    return updatedElements
  })
}

如果需要更简洁的写法，也可以用Object.fromEntries实现：

const handleButtonClick = () => {
  setElements(prev => Object.fromEntries(
    Object.keys(prev).map(key => [key, true])
  ))
}

后续如果只需要修改对象中单个属性的值，同样不能直接修改原对象，可以用对象展开运算符浅拷贝后修改：

// 仅把first属性修改为true的示例
setElements(prev => ({
  ...prev,
  first: true
}))

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