React Admin：列表过滤器变更时如何显示表格加载及获取Data Provider状态？

一、过滤器变化时显示表格加载状态 #

React Admin的List组件默认会在数据加载（包括过滤器变化触发的重新请求）时显示内置加载指示器，若需自定义逻辑或状态展示，可通过以下方式实现：

1. 用useListContext获取加载状态 #

useListContext能在List的子组件中直接获取列表的加载状态、数据等上下文信息。你的MyActions组件若出现状态不触发的情况，大概率是使用方式或上下文范围问题——确保组件已作为List的actions属性传入（当前代码已满足），然后按以下方式使用：

// MyActions.jsx
import { useListContext } from 'react-admin';

const MyActions = ({ filter }) => {
  const { isLoading } = useListContext();

  return (
    <div>
      {/* 自定义操作按钮 */}
      {isLoading && <span>加载中...</span>}
    </div>
  );
};

若状态仍不稳定，排查以下情况：

• 确认过滤器参数正确传递给List的filter属性，保证过滤器变化能触发List重新请求
• 检查Data Provider是否正确返回加载状态，无请求异常但状态未更新的情况

2. 自定义List加载组件 #

你可以通过List的loading属性替换默认加载器，或在Datagrid外层根据加载状态条件渲染骨架屏：

import { List, Datagrid, TextField, useListContext } from 'react-admin';

const CustomList = (props) => {
  const { isLoading } = useListContext();

  return (
    <List {...props} title="Data" exporter={false} empty={false}>
      {isLoading ? (
        {/* 自定义骨架屏示例 */}
        <div className="skeleton-container">
          <div className="skeleton-row">
            <div className="skeleton-item" style={{ width: '200px' }}></div>
            <div className="skeleton-item" style={{ width: '100px' }}></div>
            <div className="skeleton-item" style={{ width: '100px' }}></div>
          </div>
          {/* 重复多行模拟表格骨架 */}
        </div>
      ) : (
        <Datagrid>
          <TextField source="name" label="Name" />
          <TextField source="age" label="Age" />
          <TextField source="gender" label="Gender" />
        </Datagrid>
      )}
    </List>
  );
};

二、获取Data Provider加载状态实现骨架屏 #

除了上下文钩子，还可以用useGetList手动发起请求，完全掌控加载状态与数据流程：

import { List, Datagrid, TextField, useGetList, Loading } from 'react-admin';

const CustomList = ({ filter, ...props }) => {
  const { data, isLoading, error } = useGetList(
    'your-resource-name', // 替换为你的资源名称
    { page: 1, perPage: 10 }, // 分页参数
    { field: 'id', order: 'ASC' }, // 排序参数
    filter // 过滤器参数
  );

  if (isLoading) {
    return (
      <List {...props} title="Data" exporter={false} empty={false}>
        {/* 自定义骨架屏或用内置Loading组件 */}
        <Loading />
      </List>
    );
  }

  if (error) {
    return <div>加载失败：{error.message}</div>;
  }

  return (
    <List {...props} title="Data" exporter={false} empty={false}>
      <Datagrid data={data}>
        <TextField source="name" label="Name" />
        <TextField source="age" label="Age" />
        <TextField source="gender" label="Gender" />
      </Datagrid>
    </List>
  );
};

这种方式能完全掌控请求触发时机与状态，避免上下文钩子可能出现的同步问题。

三、解决useListContext状态不稳定问题 #

若钩子有时不触发状态更新，尝试以下排查步骤：

1. 确认MyActions在List上下文范围内，不要放在List组件外部渲染
2. 保证过滤器对象引用稳定：若每次渲染都创建新的filter对象，会导致List频繁重渲染引发状态异常，建议用useMemo缓存：

const filter = useMemo(() => ({
  // 你的过滤器参数
}), [依赖项]);

3. 升级React Admin到最新版本，旧版本可能存在上下文状态同步bug

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