React-Admin中List组件设置filterDefaultValues后自定义Empty组件不显示

问题原因 #

当给List组件设置filterDefaultValues后，React-Admin会将此判定为用户主动执行了过滤操作。此时即便数据为空，组件会优先展示默认的“No results found”提示，而非你自定义的<NoData />组件——这是框架默认的“过滤后无结果”逻辑。

解决方案 #

通过结合useListContext上下文，自定义一个空状态组件，根据当前过滤参数和数据状态决定显示内容：

1. 编写自定义空状态包装组件 #

import { useListContext } from 'react-admin';
import NoData from './NoData'; // 你的自定义空组件

const CustomEmpty = () => {
  const { data, filters } = useListContext();

  // 当数据为空且使用的是默认过滤条件时，显示自定义组件
  if (!data || data.length === 0) {
    // 匹配你的默认过滤规则，这里以statuses: ['All']为例
    const isDefaultFilter = filters.statuses?.length === 1 && filters.statuses[0] === 'All';
    if (isDefaultFilter) {
      return <NoData />;
    }
    // 非默认过滤时，显示框架默认提示
    return <span>No results found</span>;
  }

  return null;
};

2. 在List组件中使用该包装组件 #

<List 
  empty={<CustomEmpty />}
  filterDefaultValues={{ statuses: ['All'] }}
>
  {/* 你的List子组件，比如Datagrid等 */}
</List>

另一种简化方案（强制显示自定义组件） #

如果你希望无论过滤状态如何，只要数据为空就显示自定义组件，可以直接在empty prop中传入<NoData />，同时通过逻辑判断绕过框架的过滤判定：

<List 
  empty={<NoData />}
  filterDefaultValues={{ statuses: ['All'] }}
>
  {/* 子组件 */}
</List>

注：如果上述方式不生效，可在自定义NoData组件内通过useListContext获取数据状态，强制渲染自身即可。

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