React - MUI - 无法取消选择多选中的所有项目

Question

我正在使用 MUI“多选”/“多选复选框”。

我的目标 -> 打开一个模式，设置一些初始值，然后完全控制选择。

我的问题 -> 目前初始项目可以重新选择，一旦被选择就不能取消选择。

这是一个 code sandbox 分叉自与此 MUI issue 相关的 MUI 问题

截至目前 -> 我在沙盒中包含了 3 组状态

newOptions is equal to [options[1]]

1 - value: [options[1]]  -> Success
2 - value: options.slice(0,1)  -> Success
3 - value: newOptions  -> Failure

通过取消注释不同的状态，您可以看到所描述的行为，并且这些项目将无法从多选中移除。

我想知道是否有人可以描述这种行为及其解决方案 => 虽然我已经能够找到一些成功（使用 [options[x]]）但是这不支持我在我的项目中所做的事情.

Answer 1

正如https://github.com/mui-org/material-ui/issues/16775 中所评论的，您可以通过使用对象的引用作为默认值来解决这个问题，例如https://codesandbox.io/s/create-react-app-vgyz6

当使用对象的引用时，选择组件默认使用我认为的引用相等检查，所以取消选择是有效的。

当你在Javascript中使用第三种方式“3 - value: newOptions -> Failure”时，即使2个对象的属性和值都相同，但对象本身并不相等。

var jangoFett = {
    occupation: "Bounty Hunter",
    genetics: "superb"
};

var bobaFett = {
    occupation: "Bounty Hunter",
    genetics: "superb"
};

// Outputs: false
console.log(bobaFett === jangoFett);