React使用useState定义对象状态时出现类型不匹配及索引隐式any错误如何修复

问题根源 #

• 未正确解构useState返回值：useState返回长度为2的数组，第一个元素为状态值，第二个为状态更新函数。你直接将整个数组赋值给filterOpenState，导致它的类型是数组而非你定义的对象类型，这是两个报错的核心原因。
• 直接修改状态值不符合React不可变更新规则：即使正确解构后，直接修改原状态对象也不会触发组件重渲染，必须通过状态更新函数传入新的状态值。

修复代码 #

1. 状态定义部分 #

type filterOpenStateI = {
  [key: string]: boolean
}    
// 正确解构useState返回值，分别拿到状态对象和更新函数
const [filterOpenState, setFilterOpenState] = useState<filterOpenStateI>({
  filterType: false,
  filterFlag: false,
  filterPriceRange: false,
})

2. 状态更新逻辑部分 #

const handleMenuState = (e: React.MouseEvent) => {
  e.preventDefault();
  const filterTabId = e.target.closest('div')?.id;
  // 增加边界判断，避免id不存在的异常
  if (!filterTabId) return;
  // 基于原状态生成新的状态对象，触发重渲染
  setFilterOpenState(prev => ({
    ...prev,
    [filterTabId]: !prev[filterTabId]
  }))
}

额外说明 #

修复后你原有JSX判断代码就可以正常运行，不再报索引类型错误。另外你之前使用普通字典对象不触发重渲染的原因是：普通对象不属于React管控的响应式状态，修改后不会触发组件的重渲染逻辑，必须通过useState等React提供的状态API存储变量，才能在修改后触发视图更新。

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