React-admin如何阻止页面加载时自动触发getAll请求

你可以重点查阅以下几个官方文档主题完成实现：

• List组件Props配置，重点关注queryOptions、onFilterChange相关说明
• React-admin 与 React Query 集成规则
• Filter组件的事件回调配置
• useListContext 钩子的使用方法

核心实现逻辑 #

核心是通过React Query的enabled参数控制请求是否发起，默认关闭请求，检测到筛选器有输入时再打开开关，参考实现代码如下：

import { useState } from 'react';
import { List, Filter, TextInput, Datagrid, TextField } from 'react-admin';

// 自定义筛选器组件
const CustomFilter = () => (
  <Filter>
    <TextInput source="title" label="标题" />
    <TextInput source="author" label="作者" />
  </Filter>
);

export const PostList = () => {
  // 控制是否发起列表请求的开关，默认关闭
  const [enableFetch, setEnableFetch] = useState(false);

  // 筛选器变化的回调
  const handleFilterUpdate = (filters) => {
    // 判断是否有任意筛选字段存在非空值
    const hasValidFilter = Object.values(filters).some(val => val !== '' && val != null);
    if (hasValidFilter && !enableFetch) {
      setEnableFetch(true);
    }
    // 如果需要清空筛选后回到空列表，可补充以下逻辑
    // if (!hasValidFilter && enableFetch) {
    //   setEnableFetch(false);
    // }
  };

  return (
    <List
      filters={<CustomFilter />}
      // 透传给React Query的配置，enabled为false时不会自动发起请求
      queryOptions={{ enabled: enableFetch }}
      onFilterChange={handleFilterUpdate}
      filterDefaultValues={{}}
    >
      <Datagrid>
        <TextField source="id" />
        <TextField source="title" />
        <TextField source="author" />
      </Datagrid>
    </List>
  );
};

关键说明 #

• React-admin的List组件会透传所有React Query支持的queryOptions参数，enabled为false时会暂停所有自动发起的列表查询请求，仅展示空列表
• onFilterChange回调会在每次筛选器值更新时触发，可用于判断筛选值状态并动态修改请求开关
• 如果需要支持用户清空所有筛选值后恢复空列表状态，只需要在回调中补充对应逻辑修改enableFetch的值即可

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