如何通过代码清除MUI DataGrid中checkbox的选中状态？

问题原因 #

你当前为DataGrid开启了受控选择模式，选中状态完全由你通过state管理的selectionModel变量控制，直接调用DataGrid的内置方法DataGrid.UnselectAllCells()操作的是组件内部的非受控状态，和你绑定的外部状态不同步，所以不会生效。

解决方法 #

删除条目完成后，直接调用setSelectionModel把选中状态重置为空即可，不需要调用组件内置的取消选中方法。

修改后的删除按钮点击代码如下：

onClick={() => {
  const selectedIDs = new Set(selectionModel);
  librosData.filter((x) => selectedIDs.has(x.id)).map( x => {
    // ... 原有删除并更新到firebase的代码（保持不变）
  })
  // 新增下面这行代码重置选中状态
  setSelectionModel([]);
}}

可选优化 #

如果你不需要清空全部选中状态，只需要移除已删除条目的选中记录，可以替换为以下代码，避免误取消其他未删除条目的选中状态：

setSelectionModel(prev => prev.filter(id => !selectedIDs.has(id)))

内容的提问来源于stack exchange，提问作者React Enjoyer