时间戳

首页 > 解决方案 > 删除所有选定的行，即使我在其他页面中使用带有受控分页的 react-table

reactjs - 删除所有选定的行，即使我在其他页面中使用带有受控分页的 react-table

问题描述

使用react-table v7，即使我在其他页面中使用hook-plugin useRowSelect中的toggleAllRowsSelected ，我也很难尝试删除所有选定的行。

我在服务器端使用受控分页，正如文档所述，我设置为将 prop selectedRowIdsautoResetSelectedRows: false存储在状态中。因此，当我更改页面时，数据会更改，但我可以保持selectedRowIds不变。当我选中或取消选中一行时，它工作正常，但我不知道如何取消选中所有这些，而不仅仅是当前页面中的行，这就是toggleAllRowsSelected正在做的事情。

我做错了什么或者是toggleAllRowsSelected回调中的错误？有没有办法操纵 react-table 的状态以手动更改selectedRowIds道具？

我以这种方式解决了它..但我认为它可能会导致性能问题...：

  const handleUnselectAll = () => {
    state.selectedRowIds = {};
    toggleAllRowsSelected(false);
  };

文档：

用户行选择：https : //react-table.tanstack.com/docs/api/useRowSelect#userowselect

来自服务器端的数据：https ://react-table.tanstack.com/docs/faq#how-do-i-stop-my-table-state-from-automatically-resetting-when-my-data-changes

标签： reactjspaginationserver-sidereact-table

解决方案

我通过使用stateReducer选项解决了这个问题。

  stateReducer: (newState, action) => {
    switch (action.type) {
      case 'toggleAllRowsSelected':
        return {
          ...newState,
          selectedRowIds: {},
        };

      default:
        return newState;
    }
  }

参考：https ://react-table.tanstack.com/docs/api/useTable

推荐阅读