React TS：动态修改useState对象属性遇类型错误，求解决方案

核心问题原因 #

写死键名（比如Nike）只能修改单个复选框，换成变量brand又报类型错，本质是字符串变量不能直接作为对象字面量的键，同时TypeScript需要明确键的类型匹配。

两步解决 #

1. 用计算属性名实现动态键修改 #

JavaScript里用方括号包裹变量，就能把字符串变量作为对象的键，写法是[brand]: !checked，这样就能动态对应到当前循环的品牌。

2. 用函数式更新避免状态 stale 问题 #

直接依赖filterState可能因为闭包拿不到最新状态，推荐用setFilterState的函数式写法，接收最新状态作为参数，确保更新逻辑基于当前最新值。

修改后的完整代码 #

{
  Object.entries(filterState.Brands).map(([brand, checked]) =>
    <div className="" key={brand} >
      <label htmlFor={brand} className="mr-[10px]">{brand}: </label>
      <input 
        type="checkbox" 
        name={brand} 
        className="cursor-pointer" 
        checked={checked} 
        onChange={() => setFilterState(prevState => ({
          ...prevState,
          Brands: {
            ...prevState.Brands,
            [brand]: !checked
          }
        }))}
      />
    </div>
)}

TypeScript类型错误额外处理 #

如果是TS项目，要确保brand的类型和Brands的键一致，可以提前定义类型：

// 定义状态类型
type FilterState = {
  Brands: {
    NewBalance: boolean;
    Nike: boolean;
    Addiddas: boolean;
    Converse: boolean;
    UnderArmour: boolean;
  };
  Gender: {
    Male: boolean;
    Female: boolean;
    Kids: boolean;
  };
};

// 初始化时指定类型
const [filterState, setFilterState] = useState<FilterState>({
  Brands:{
    NewBalance: false,
    Nike: false,
    Addiddas: false,
    Converse:false,
    UnderArmour:false,
  },
  Gender:{
    Male: false,
    Female: false,
    Kids:false,
  }
});

这样brand会被自动推断为Brands的键类型，类型错误就消失了。

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