React MUI带复选框的多选组件初始选中选项未勾选问题求助

问题根源 #

你当前的异常是对象引用匹配错误导致的：
JS中普通对象为引用类型，你初始化state时写入的Nintendo、Xbox两个对象，和variants常量数组中存储的同id对象是完全独立的两个内存引用，你用indexOf方法判断是否存在时，会严格对比引用地址，永远返回-1，因此默认项的复选框不会被勾选，也无法正常响应点击切换。
而其余选项操作正常，是因为你点击选择时是直接把variants数组中的对象推入选中列表，引用地址一致，indexOf可以正常匹配。

解决方案 #

将Checkbox的选中状态判断逻辑从引用匹配改为唯一标识（id）匹配即可，修改MenuItem渲染部分的代码：

{variants.map((variant) => (
  <MenuItem key={variant.id} value={variant}>
    {/* 把原来的indexOf判断替换为按id匹配 */}
    <Checkbox checked={variantName.some(selected => selected.id === variant.id)} />
    <ListItemText primary={variant.name} />
  </MenuItem>
))}

修改后页面初始化时会自动匹配id一致的默认选中项，复选框会正常勾选，也可以正常对默认项执行取消、重新勾选操作。

可选优化：如果要减少重复的对象定义，state初始化时可以直接从公共的variants数组中筛选目标项，避免重复写相同的对象属性：

const [variantName, setVariantName] = React.useState(
  variants.filter(item => [10, 11].includes(item.id))
);

内容的提问来源于stack exchange，提问作者My Name is Ratna