如何使用 mui-datatable 在 React 上保持选择答案

【问题标题】：How to persist selection on React using mui-datatable如何使用 mui-datatable 在 React 上保持选择
【发布时间】：2020-11-14 13:39:12
【问题描述】：

我正在使用 mui-datatable 在我的应用程序中实现表。我已经启动并运行了我需要的所有功能，并且我正在使用服务器端数据和分页。

问题是当用户更改当前页面时，我需要坚持选择行。

我可以使用 onRowSelected 将选择的行的 ID 存储在外部数组中。但我不确定如何让表格在用户更改页面时将这些行呈现为选中状态。

请记住，我正在使用服务器端数据，所以我的想法是在第 1 页中，当我选择第 1 行时，获取该记录的 id 并将其添加到所选 id 的数组中。然后我需要检查当前显示在页面中的行的ID是否包含在选定的数组中，如果是，则检查它是否在表中被选中。这样，当我更改页面时，将运行相同的逻辑并清除所有行，因为没有选择新页面中的任何行。我想你明白了。

我不知道我应该在哪里检查行的 id 是否包含在我选择的数组中，如果是，如何在数据表中检查它。

提前感谢您的帮助。

【问题讨论】：

你看过 Reacts 的 useState 钩子吗？您可以将 ID 存储在 state 中并随时引用它，在需要时清除它等等。
@AlexGilliott 嗨！...谢谢，是的，我可以使用 useState，但这不是问题...我正在存储选择，无论是使用类组件状态还是 useState 挂钩没关系......我需要知道的是如何告诉 mui-datatables 每次表更改页面时应该选择哪些行以及不应该选择哪些行。因为我将服务器端数据以块的形式传递给表我是寻找某种“onRowRendered”事件，允许我检查正在呈现的行是否在我的选择中，并使表格选中复选框。

标签： reactjs mui-datatable

【解决方案1】：

我很愚蠢......我只是需要一些睡眠xD

一旦我意识到我只需要像这样传递 rowsSelected 选项，我的问题就解决了：

rowsSelected: this.state.pictures.filter(p=>this.state.selectedIds.includes(p.id)).map((p,i)=>i)

其中 this.state.picture 将在用户更改页面时更改，并且 rowsSelected 也会更改。

没关系...这是菜鸟的错误。

【讨论】：

【解决方案2】：

您可以将整个 MUI 数据表包装在另一个组件中，该组件维护所有选定行的状态

【讨论】：