React Material UI Checkbox选中状态不更新问题咨询

问题出在直接修改原Set对象后传递给setFields。React的useState通过引用变化判断是否需要重渲染，你修改的是同一个Set实例的内容，引用没变化，所以React不会触发组件更新，Checkbox的选中状态自然不会同步。

修复方案（无需单独维护每个字段状态） #

只需要修改handleChangeFilter，每次更新时创建新的Set实例：

const handleChangeFilter = (event: ChangeEvent<HTMLInputElement>) => {
  const value = event.target.value;
  // 基于原Set创建新实例，避免修改原状态引用
  const newFields = new Set(fields);
  if (newFields.has(value)) {
    newFields.delete(value);
  } else {
    newFields.add(value);
  }
  setFields(newFields);
};

这样每次状态更新都是新的引用，React会检测到变化并重新渲染，Checkbox的checked状态就能和fields同步了。

关于Map的可行性 #

用Map作为状态是可行的，但完全没必要。Set已经能简洁地实现“跟踪选中字段”的需求，Map更适合需要存储键值对的场景，这里用Set足够高效。

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