在React Admin自定义列表中使用ListContextProvider如何实现筛选功能

核心修改点如下：

• 新增独立的筛选状态管理，将筛选值同步到接口请求参数中
• 在ListContextProvider的value中注入筛选相关的状态与方法，兼容React Admin内置筛选组件的上下文消费要求
• 筛选值变更时自动重置页码到第一页，避免筛选后出现空页问题

修改后的完整代码：

import React, { useState } from 'react'
import {
  Datagrid,
  TextField,
  Pagination,
  Loading,
  ListContextProvider,
  useQuery,
  Filter, // 新增导入内置筛选组件
  TextInput // 新增导入筛选输入组件
} from 'react-admin';
import keyBy from 'lodash/keyBy'
import Button from '@material-ui/core/Button';
import "../../css/styles.css";

function CustomList(props) {
  const [page, setPage] = useState(1);
  const [perPage, setPerPage] = useState(50);
  const [sort, setSort] = useState({ field: 'id', order: 'DESC' })
  // 新增筛选状态，默认包含props.id的固定筛选
  const [filter, setFilter] = useState({ id: props.id });

  // 自定义筛选变更方法，筛选修改后自动回到第一页
  const handleFilterChange = (newFilter) => {
    setFilter(newFilter);
    setPage(1);
  }

  const { data, total, loading, error } = useQuery({
    type: 'getList',
    resource: 'list',
    payload: {
      pagination: { page, perPage },
      sort,
      filter: filter, // 替换为动态筛选值
    }
  });

  if (loading) {
    return <Loading />
  }
  if (error) {
    window.location.reload(false);
  }

  return (
    <div>
      <ListContextProvider value={{
        data: keyBy(data, 'id'),
        ids: data.map(({ id }) => id),
        total,
        page,
        perPage,
        setPage,
        setPerPage,
        setSort: (field, order) => {
          setSort({ field, order });
        },
        currentSort: sort,
        basePath: "/list",
        resource: 'lists',
        selectedIds: [],
        // 新增注入筛选相关的上下文字段
        filter,
        setFilter: handleFilterChange,
        showFilter: () => {},
        hideFilter: () => {}
      }}>
        {/* 新增筛选表单，alwaysOn代表默认展示，无需点击筛选按钮 */}
        <Filter>
          <TextInput source="name" label="名称" alwaysOn />
          <TextInput source="id" label="记录ID" />
        </Filter>
        <Datagrid style={{ tableLayout: 'fixed', wordWrap: "break-word" }}>
          <TextField source="id" />
          <TextField source="name" />
        </Datagrid>
        <Pagination rowsPerPageOptions={[10, 25, 50, 100]} />
      </ListContextProvider>
    </div>
  );
}

export default CustomList;

如果你不需要使用React Admin内置的Filter组件，也可以完全自定义筛选表单，只需要自行维护filter状态，状态变更后触发useQuery重新请求即可，不需要额外注入上下文的筛选字段。

内容的提问来源于stack exchange，提问作者dolki