Typescript React中styled component通过prop设置条件样式不生效

问题原因 #

你是直接修改了原有state数组内部的对象属性，之后又把原数组直接传入setToggleFilter。React对state更新做浅比较，传入的数组和之前的state是同一个引用，会被判定为状态没有变化，不会触发组件重新渲染，因此styled component拿不到最新的$selected值，样式不会更新。

修复代码 #

将点击处理函数修改为以下写法，遵循React state不可变的更新规则：

const handleToggleFilter = (item: ToggleFilterItem) => {
  const newToggleFilter = toggleFilter.map(i => {
    if (i.name === item.name) {
      return { ...i, selected: !i.selected }
    }
    return i
  })
  setToggleFilter(newToggleFilter)
}

补充说明 #

所有React state的更新都要避免直接修改原有值，数组/对象类型的state需要返回全新的引用，才能正确触发重渲染。

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