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

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

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

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

这是一个与此相关的MUI问题的分支

到目前为止->我已经在沙箱中包含了3组状态

newOptions is equal to [options[1]]

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

通过取消对不同状态的注释，您可以看到所描述的行为，并且这些项将不会从multi-select中移除

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

如中所述，您可以通过使用对象的引用作为默认值来解决这个问题，例如

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

当您在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);

---

谢谢你的回答，我正在考虑如何继续使用这个->我希望做一些类似“useffect（（）=>{setState（{value:arrayOfObjects}}，[]）”的事情，如果我试图将select用作受控组件，我不确定如何将引用的信息传递给我的useState，就像你一样。虽然这个代码沙盒是我改编的，但我仍然不能完全确定如何“动态”使用这个沙盒，基本上是利用沙盒的功能，但是选项将来自服务器。我添加了一个示例来使用对象的引用。很抱歉，我看不到您链接的沙盒与我最初发布的沙盒之间有什么区别。你能告诉我你说的电话号码吗？谢谢。假设您的选项列表来自服务器，并且您在useEffect中使用setState，我们仍然可以将其称为变量选项。然后，您可能会有一个选定项目的列表，我们将其命名为selectedOptions。关键是您需要通过将每个选定项引用到变量选项中相应的项来填充selectedOptions。