反应表预选行

Question

我正在尝试预选表中的行，但除非实际数据本身发生更改，否则表不会刷新。有没有一种方法可以重新初始化表而不涉及更改数据？

也完全有可能我实现这个要求的方法是错误的，可能有更好的方法？我在这里创建了一个示例沙箱：

https://codesandbox.io/s/mock-preselected-rows-data-t36nl?file=/src/App.js

在此您可以看到我的服务器有一个模拟响应，用于确定应选择哪些行。然后，我抓取数据进行比较，以查看数据中是否存在模拟响应中的任何项目，如果存在，则将它们推送到一个新的 obj，然后将其输入到 selectedRowIds 的 intialState 中

任何指导表示赞赏。

Answer 1

看来你的工作一切顺利。对您问题的简短回答。

只要您希望用户以 React 的方式看到某些内容，就需要将其包含在状态或状态派生中。在您的情况下，它是包裹在行和表格中的单元格数据。

所以你无法避免在不接触数据的情况下选择它。除非您不希望用户看到更改。

虽然复选框看起来不是原始数据流的一部分，但是当你在它上面开发时，你必须让它成为数据的一部分。老实说，将其作为数据的一部分很容易，因为当您想要刷新表时，例如。选择或取消选择，或删除一行，您希望刷新所有内容。不幸的是，在 React 中使用表进行本地刷新非常困难。这是可能的，但非常困难，因为大多数设计都是基于

prop

或

context

。

Answer 2

您还可以重构您的

handleSelectedRows

函数。

// Find row ids and compare them with our 'preSelectedTheseItems' array.
  const handleSelectedRows = () => {
     const preIds = preSelectTheseItems.map(item => item.collectibleId)
     return data?.filter((collectibleRow, index) => preIds.includes(collectibleRow.collectibleId));
  };

示例：codesandbox