React TS遍历对象时，如何为复选框设置正确的checked属性？

在React TypeScript中遍历对象渲染复选框时，无法获取对象对应key的布尔值来设置复选框的checked属性。

当前状态定义：

const [brandState,setBrandState] = useState({
    Brands:{
        NewBalance: false,
        Nike: false,
        Addiddas: false,
        Converse:false,
        UnderArmour:false,
    },
});

遍历渲染复选框的代码：

{
  Object.keys(brandState.Brands).map((brand)=>
  <div className="">
  <label htmlFor={brand} className="mr-[10px]">{brand}: </label>
  <input type="checkbox" name={brand} className="cursor-pointer" />
  </div>
  )
}

尝试checked={brand}时因brand是字符串报错，尝试checked={brandState.Brands.brand}也报错，需要解决如何正确获取每个key对应的布尔值来设置checked属性。

1. 正确获取动态属性的布尔值 #

由于brand是字符串类型的变量，不能用点语法访问对象属性，必须使用方括号语法。同时因为是TypeScript，需要添加类型断言让编译器识别brand是合法键：

checked={brandState.Brands[brand as keyof typeof brandState.Brands]}

2. 添加状态更新逻辑（必要） #

要让复选框能正常切换状态，需给input添加onChange事件，通过函数式更新确保基于最新状态修改：

<input 
  type="checkbox" 
  name={brand} 
  className="cursor-pointer"
  checked={brandState.Brands[brand as keyof typeof brandState.Brands]}
  onChange={() => {
    setBrandState(prev => ({
      ...prev,
      Brands: {
        ...prev.Brands,
        [brand]: !prev.Brands[brand as keyof typeof prev.Brands]
      }
    }))
  }}
/>

完整优化后的渲染代码 #

{
  Object.keys(brandState.Brands).map((brand) => (
    <div key={brand} className="">
      <label htmlFor={brand} className="mr-[10px]">{brand}: </label>
      <input 
        type="checkbox" 
        id={brand} // 补充id，与label的htmlFor对应，提升交互性
        name={brand} 
        className="cursor-pointer"
        checked={brandState.Brands[brand as keyof typeof brandState.Brands]}
        onChange={() => {
          setBrandState(prev => ({
            ...prev,
            Brands: {
              ...prev.Brands,
              [brand]: !prev.Brands[brand as keyof typeof prev.Brands]
            }
          }))
        }}
      />
    </div>
  ))
}

注：给循环项添加key={brand}避免React列表渲染警告，同时补充input的id属性，让点击标签也能触发复选框状态切换。

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