React-Table 保持选定行的状态答案

【问题标题】：React-Table keep state of selected rowsReact-Table 保持选定行的状态
【发布时间】：2022-07-13 15:23:52
【问题描述】：

我正在尝试为 react-table v7 保留选中复选框的状态。我有一个复选框，可以一次选择多行并且效果很好，问题是一旦打开对话框进行批处理操作，表格就无法保持该状态。即使选定的行数据仍然可用，对话框打开后复选框立即变为未选中状态。我只需要复选框来保持状态。数据是从 graphql api 获取的，并且轮询设置为 0

使用的大部分代码与文档相同

const TableContainer = ({ columns, data }) => {
    const {
      getTableProps,
      getTableBodyProps,
      headerGroups,
      page,
      prepareRow,
      canPreviousPage,
      canNextPage,
      pageOptions,
      pageCount,
      gotoPage,
      nextPage,
      previousPage,
      setPageSize,
      setGlobalFilter,
      selectedFlatRows,
      state: { pageIndex, pageSize, globalFilter },
    } = useTable(
      {
        columns,
        data,
        defaultColumn: { Filter: DefaultColumnFilter },
        initialState: { pageIndex: 0, pageSize: 10 },
      },
      useFilters,
      // useExpanded,
      useGlobalFilter,
      useSortBy,
      usePagination,
      useRowSelect,
      (hooks) => {
        hooks.visibleColumns.push((columns) => [
          {
            id: "selection",
            Header: ({ getToggleAllRowsSelectedProps }) => (
              <Checkbox {...getToggleAllRowsSelectedProps()} />
            ),
            Cell: ({ row }) => {
              return <Checkbox {...row.getToggleRowSelectedProps()} />;
            },
          },
          ...columns,
        ]);
      }
    ); // return

react 钩子中的任何输入都能够保持数据输入良好而不会出现问题。只有改变摆在桌面上。任何帮助表示赞赏

【问题讨论】：

标签： reactjs react-table react-table-v7

【解决方案1】：

我遇到了同样的问题，我通过将单元格、行和列的自动重置设置为 false 来修复它。 Here 您可以阅读有关此修复的信息。

const TableContainer = ({ columns, data }) => {
    const {
      getTableProps,
      getTableBodyProps,
      headerGroups,
      page,
      prepareRow,
      canPreviousPage,
      canNextPage,
      pageOptions,
      pageCount,
      gotoPage,
      nextPage,
      previousPage,
      setPageSize,
      setGlobalFilter,
      selectedFlatRows,
      state: { pageIndex, pageSize, globalFilter },
    } = useTable(
      {
        columns,
        data,
        defaultColumn: { Filter: DefaultColumnFilter },
        initialState: { pageIndex: 0, pageSize: 10 },
        //Add this
        autoResetSelectedRows: false,
        autoResetSelectedCell: false,
        autoResetSelectedColumn: false,
      },
      useFilters,
      // useExpanded,
      useGlobalFilter,
      useSortBy,
      usePagination,
      useRowSelect,
      (hooks) => {
        hooks.visibleColumns.push((columns) => [
          {
            id: "selection",
            Header: ({ getToggleAllRowsSelectedProps }) => (
              <Checkbox {...getToggleAllRowsSelectedProps()} />
            ),
            Cell: ({ row }) => {
              return <Checkbox {...row.getToggleRowSelectedProps()} />;
            },
          },
          ...columns,
        ]);
      }
    ); // return

【讨论】：