使用带有 ReactTable 的查询参数

Question

我有一个看起来或多或少像这样的反应表：

<ReactTable
          ref={tableRef}
          style={{ minHeight: "80vh" }}
          className="-highlight -striped  text-center"
          data={data}
          loading={isLoading}
          loadingText={getLoadingMessage("Fetching users...")}
          noDataText="No users found..."
          columns={getColumns()}
          filterable={false}
          minRows={0}
          pageSizeOptions={[10, 13, 20, 50, 100]}
          defaultPageSize={10}
          onFetchData={tableState => getUsers({ tableState, searchValue })}
/>

我想使用查询参数，以便我可以在我的链接中，根据页面和行，像这样？page=3&rows=50。如何使用钩子来实现这一点？

这就是 getUsers 的样子：

getUsers: thunk(async (actions, { tableState, searchValue }) => {
    actions.setIsLoading(true);

    let QUERIES = getQueryParamsFromTable(tableState, searchValue);

    try {
      const { data } = await api.get(urlParamReplacer(AUTH.USERS), {
        params: QUERIES
      });
      actions.setUsers(data);
    } catch (error) {
      actions.setIsLoading(false);
      console.error(error);
    }
  }),

这是setIsLoading：

setIsLoading: action((state, payload) => {
    state.isLoading = payload;
  }),

Answer 1

您可以创建自定义挂钩来返回查询参数或实现use-query-params 库。

使用use-query-params库，可以用以下代码实现：

const [query, setQuery] = useQueryParams({
  page: NumberParam,
  rows: NumberParam,
});
const [page, setPage] = useState(query.page || 0);

<ReactTable
  ref={tableRef}
  style={{ minHeight: "80vh" }}
  className="-highlight -striped  text-center"
  data={data}
  loading={isLoading}
  loadingText={getLoadingMessage("Fetching users...")}
  noDataText="No users found..."
  columns={getColumns()}
  filterable={false}
  minRows={0}
  pageSizeOptions={[10, 13, 20, 50, 100]}
  defaultPageSize={10}
  page={page}
  pageSize={query.rows}
  onPageChange={pageIndex => setPage(pageIndex)}
  onFetchData={tableState => getUsers({ tableState, searchValue })}
/>

这是一个带有自定义钩子的示例：

import { useState, useEffect } from "react";
import { useLocation, useHistory } from 'react-router-dom';

const usePagination = (initialPage = 0, initialRows = 50) => {
  const location = useLocation();
  const searchParams = new URLSearchParams(location.search);
  const history = useHistory();

  const [page, updatePage] = useState(Number(searchParams.get("page")) || initialPage);
  const [rows, updateRows] = useState(Number(searchParams.get("rows")) || initialRows);

  useEffect(() => {
    const searchParams = new URLSearchParams(location.search);
    
    updatePage(Number(searchParams.get('page')) || page);
    updateRows(Number(searchParams.get('rows')) || rows);
  }, [location, page, rows]);

  const setPage = toPage => {
    searchParams.set("page", toPage || initialPage);
    history.push({ search: searchParams.toString() });
  };

  const setRows = toRows => {
    searchParams.set("rows", toRows || initialRows);
    history.push({ search: searchParams.toString() });
  };

  return {
    page,
    rows,
    setPage,
    setRows
  };
};

export default usePagination;

const { page, rows, setPage, setRows } = usePagination();

<ReactTable
  ref={tableRef}
  style={{ minHeight: "80vh" }}
  className="-highlight -striped  text-center"
  data={data}
  loading={isLoading}
  loadingText={getLoadingMessage("Fetching users...")}
  noDataText="No users found..."
  columns={getColumns()}
  filterable={false}
  minRows={0}
  pageSizeOptions={[10, 13, 20, 50, 100]}
  defaultPageSize={10}
  page={page}
  pageSize={rows}
  onPageChange={pageIndex => setPage(pageIndex)}
  onPageSizeChange={(pageSize, pageIndex) => {
    setPage(pageIndex);
    setRows(pageSize);
  }}
  onFetchData={tableState => getUsers({ tableState, searchValue })}
/>