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

Posted 2023-03-24

【中文标题】React - MUI - 无法取消选择多选中的所有项目

【英文标题】：React - MUI - cannot deselect all items in multi select

【发布时间】：2021-01-15 12:46:10

【问题描述】：

我正在使用 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]]）但是这不支持我在我的项目中所做的事情.

【参考方案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);

【讨论】：

感谢您的回答，我正在考虑如何使用它 -> 我正在寻找类似 `useEffect(() => setState(value:arrayOfObjects ) , []) ` 如果我尝试将 select 用作​​受控组件，我不确定如何将引用的信息（如您所拥有的）传递给我的 useState。虽然这个代码沙箱是我改编的，但我仍然不完全确定如何“动态”使用它，基本上是采用沙箱所拥有的，但是选项将来自服务器

我添加了一个例子来使用对象的引用。codesandbox.io/s/create-react-app-forked-j6xyr

很抱歉，您链接的沙箱与我最初发布的沙箱之间没有区别。你能给我你说的行号吗？谢谢

好的。假设您的选项列表来自服务器，并且您在 useEffect 中使用了 setState，我们仍然可以将其称为变量选项。然后你可能有一个选定项目的列表，我们将其命名为 selectedOptions。关键是您需要通过将每个选定项目引用到变量选项中的相应项目来填充 selectedOptions。 codesandbox.io/s/create-react-app-forked-jbqbr