Reinitializing-table при рендеринге

Question

У меня проблема, из-за которой response-table (версия 7.1.0), кажется, повторно инициализируется каждый раз, когда необходимо повторно отрисовать страницу. Используя приведенный ниже код (пример выполнения здесь) в качестве примера, если вы должны были изменить значение pageIndex (переключившись на другую страницу), а затем нажать Dummy Button, вы можете заметить, что pageIndex сбрасывается до значения по умолчанию 0. То же самое происходит, если вы изменяете pageSize, так как он автоматически сбрасывается до значения по умолчанию, равного 10, каждый раз, когда страницу необходимо повторно отрисовать.

import React, { useState } from "react";
import makeData from "./makeData";
import { useTable, usePagination } from "react-table";
import { ButtonToolbar, Button, Table } from "react-bootstrap";

// Nonsense function to force page to be rendered
function useForceUpdate() {
  const [value, setValue] = useState(0);

  return () => setValue(value => ++value);
}

export default function App() {
  const forceUpdate = useForceUpdate();
  const columns = React.useMemo(
    () => [
      {
        Header: "Name",
        columns: [
          {
            Header: "First Name",
            accessor: "firstName"
          },
          {
            Header: "Last Name",
            accessor: "lastName"
          }
        ]
      },
      {
        Header: "Info",
        columns: [
          {
            Header: "Age",
            accessor: "age"
          },
          {
            Header: "Visits",
            accessor: "visits"
          },
          {
            Header: "Status",
            accessor: "status"
          },
          {
            Header: "Profile Progress",
            accessor: "progress"
          }
        ]
      }
    ],
    []
  );

  const data = React.useMemo(() => makeData(100000), []);
  let ArchiveTable = ({ columns, data }) => {
    const {
      getTableProps,
      getTableBodyProps,
      headerGroups,
      prepareRow,
      page,
      canPreviousPage,
      canNextPage,
      pageOptions,
      pageCount,
      gotoPage,
      nextPage,
      previousPage,
      setPageSize,
      state: { pageIndex, pageSize }
    } = useTable(
      {
        columns,
        data
      },
      usePagination
    );

    return (
      <div style={{ textAlign: "center" }}>
        <Table striped bordered {...getTableProps()} className="datasets">
          <thead>
            {headerGroups.map(headerGroup => (
              <tr {...headerGroup.getHeaderGroupProps()}>
                {headerGroup.headers.map(column => (
                  <th {...column.getHeaderProps()}>
                    {column.render("Header")}
                  </th>
                ))}
              </tr>
            ))}
          </thead>
          <tbody {...getTableBodyProps()}>
            {page.map((row, i) => {
              prepareRow(row);

              return (
                <tr
                  {...row.getRowProps()}
                  className={row.isSelected ? "selected" : row.className}
                >
                  {row.cells.map(cell => {
                    return (
                      <td {...cell.getCellProps()}>{cell.render("Cell")}</td>
                    );
                  })}
                </tr>
              );
            })}
          </tbody>
        </Table>
        <div className="pagination" style={{ display: "inline-block" }}>
          <ButtonToolbar>
            <Button
              variant="light"
              onClick={() => gotoPage(0)}
              disabled={!canPreviousPage}
              size="small"
            >
              <span>&lt;&lt;</span>
            </Button>
            <Button
              variant="light"
              onClick={previousPage}
              disabled={!canPreviousPage}
              size="small"
            >
              <span>&lt;</span>
            </Button>
            <select
              value={pageSize}
              onChange={e => {
                setPageSize(Number(e.target.value));
              }}
            >
              {[5, 10, 20, 30, 40, 50].map(pageSize => (
                <option key={pageSize} value={pageSize}>
                  Show {pageSize}
                </option>
              ))}
            </select>
            <Button
              variant="light"
              onClick={nextPage}
              disabled={!canNextPage}
              size="small"
            >
              <span>&gt;</span>
            </Button>
            <Button
              variant="light"
              onClick={() => gotoPage(pageCount - 1)}
              disabled={!canNextPage}
              size="small"
            >
              <span>&gt;&gt;</span>
            </Button>
          </ButtonToolbar>
          <span>
            Page <strong>{pageOptions.length === 0 ? 0 : pageIndex + 1}</strong>{" "}
            of <strong>{pageOptions.length}</strong>
          </span>
        </div>
      </div>
    );
  };

  return (
    <div className="App">
      <ArchiveTable data={data} columns={columns} />
      <button onClick={forceUpdate}>Dummy Button</button>
    </div>
  );
}

Я не знаю, что делать, чтобы это исправить. Как правильно настроить все, чтобы я не переинициализировал таблицу ответов каждый раз, когда страницу нужно повторно отображать? Другими словами, если я нажму кнопку-заглушку, я не хочу, чтобы таблица вернулась к странице 1 с размером страницы 10.

Answer 1

Закончил выяснение ответа. Проблема заключалась в том, что мне нужно было переместить инициализацию таблицы за пределы логики рендеринга (что довольно очевидно, если задним числом). По сути, я просто создал функцию ArchiveTable. Для тех, кто наткнется на это, вы можете проверить здесь рабочий пример.

function ArchiveTable({ columns, data }) {
    // Add all the initialization and table rendering code here
    // (everything that was originally part of the ArchiveTable initialization)
}