React Context API下如何让map生成的复选框组件拥有独立状态

你当前的Context里只存储了单个布尔值作为选中状态，所有map生成的复选框都共用这同一个状态，所以修改一个就会同步影响所有复选框。

核心思路是为每个复选框分配唯一标识，用键值对结构存储所有复选框的独立状态。

1. 调整Context定义和状态结构 #

将原来的单布尔值状态替换为Record类型，以复选框的唯一ID为键，对应选中状态为值，同时更新Context的操作方法，支持传入ID指定要修改的复选框：

// 调整Context类型定义
interface ICartContext {
  checkedMap: Record<string | number, boolean>;
  toggleChecked: (id: string | number) => void;
}

// Main组件内的状态定义
const [checkedMap, setCheckedMap] = useState<Record<string | number, boolean>>({});

// 实现切换指定复选框状态的方法
const toggleChecked = (id: string | number) => {
  setCheckedMap(prev => ({
    ...prev,
    [id]: !prev[id] // 翻转对应ID的选中状态
  }))
}

// 传入Context Provider的状态值
const contextValue = {
  checkedMap,
  toggleChecked
}

2. 渲染复选框时传递唯一ID #

你map遍历的数据源每一项都应该有唯一标识（比如id字段），渲染内层复选框组件时将该ID作为props传入：

// 假设你的复选框数据源为checkList，每一项含唯一id
{checkList.map(item => (
  <InnerCheckboxComponent key={item.id} itemId={item.id} />
))}

3. 子组件按ID读取/更新状态 #

内层复选框组件用自身的ID从Context中读取对应状态，调用更新方法时也传入当前ID：

const InnerCheckboxComponent = ({ itemId }) => {
  const context = useContext(CartContext);
  return (
    <Checkbox 
      checked={context.checkedMap[itemId] ?? false} // 未初始化的默认未选中
      checkedIcon={<CheckIcon/>}
      onChange={() => context.toggleChecked(itemId)}
    />
  )
}

如果需要支持全选、批量取消等功能，直接操作checkedMap对象的所有键值即可。

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