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

Question

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

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

我的问题 -> 目前初始项目可以重新选择，并且一旦选择就无法取消选择。

这是一个code sandbox从与此相关的 MUI 问题派生 MUI issue

截至目前 ->我已在沙箱中包含 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”时，即使两个对象的属性和值相同，但对象本身并不被视为相等。

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

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

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