React中点击onClick事件后如何更新useState的原有状态属性

错误原因分析 #

• 语法错误：更新对象类型状态的属性时，必须遵循属性名: 新值的对象字面量语法，原代码直接写!favorited不符合语法要求，同时要读取旧状态的favorited属性需要通过isActive.favorited访问
• 逻辑错误：React的状态更新是异步批量执行的，连续多次调用setActive时，前一次更新未生效前读取的isActive还是旧值，会导致颜色判断逻辑出错，也没必要多次调用状态更新方法，一次就能完成所有属性修改。

正确实现代码 #

const [isActive, setActive] = useState({
  favorited: false,
  customColor: "white"
});

const handleToggle = () => {
  // 先计算取反后的收藏状态
  const newFavorited = !isActive.favorited;
  // 一次性更新所有状态属性
  setActive({
    favorited: newFavorited,
    customColor: newFavorited ? "red" : "white"
  });
}

如果要确保状态更新时始终拿到最新的前序状态，可以用函数式更新写法，避免异步更新导致的取值异常：

const handleToggle = () => {
  setActive(prevState => {
    const newFavorited = !prevState.favorited;
    return {
      favorited: newFavorited,
      customColor: newFavorited ? "red" : "white"
    }
  });
}

额外优化建议 #

customColor完全可以通过favorited的值推导得出，不需要单独存入状态，可以减少冗余状态：渲染图标时直接写 <Icon color={isActive.favorited ? 'red' : 'white'} /> 即可，对应状态只需要保留favorited一个布尔值。

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