React Form Switch UI变更但状态未更新问题咨询

1. 基于State设置Form Switch默认值 #

使用受控组件模式，通过checked属性直接绑定state对应项的权限值，替代非受控的defaultChecked（后者无法与React state联动）。示例代码：

<Switch
  checked={item.permission} // 从state读取初始/当前状态
  onChange={() => handleSwitchChange(item.id)}
/>

这样组件初始化时会直接同步state中的permission值，保证UI与state初始状态一致。

2. 正确更新权限状态 #

React要求state不可直接修改，需通过生成新数组的方式更新：

const handleSwitchChange = (id) => {
  setPermissions(prev => 
    prev.map(item => 
      item.id === id ? {...item, permission: !item.permission} : item
    )
  );
};

这段代码通过map遍历原数组，找到目标ID对应的项后，解构原对象并修改permission值，返回全新的数组。React能检测到state引用变化，触发组件重新渲染，确保UI与state同步。

问题根源分析 #

• 直接修改原state数组/对象：由于引用未改变，React无法感知state更新，导致日志显示旧值、UI与state脱节。
• 使用defaultChecked：非受控组件的状态由DOM管理，无法与React state联动，造成UI变化但state不更新的矛盾。

内容的提问来源于stack exchange，提问作者github.arief