react-admin如何访问多资源全量记录实现已分配日期置灰功能

核心结论 #

react-admin 目前没有内置的现成方案可以直接实现「已被其他日程占用的日期置灰禁用」的日历选择交互，现有<ReferenceInput>、<ReferenceField>系列组件的设计目标是处理单条/有限条数的ID关联数据，默认不支持直接拉取全量资源数据供组件逻辑使用。

你不需要深入研究<ReferenceField>的源码重写无ID关联的全量拉取组件，react-admin 官方导出的数据请求钩子已经可以低成本满足需求，实现路径如下：

• 直接在自定义输入组件内调用useGetList钩子拉取日程资源的全量列表即可，这个钩子会自动复用react-admin的鉴权、缓存、加载状态管理逻辑，不需要自己重写底层数据请求逻辑。
• 搭配useRecordContext钩子获取当前正在编辑的日程记录ID，从拉取到的全量日程数据中排除当前日程自身的日期配置，剩下的就是需要置灰禁用的、被其他日程占用的日期集合。
• 将计算得到的禁用日期规则传入你选用的日历组件（比如Ant Design、MUI配套的日历选择器）的disabledDate类配置项，就能实现预期交互。

基础实现代码参考：

import { useGetList, useRecordContext } from 'react-admin';
import { DateCalendar } from '@mui/x-date-pickers';
import isSameDay from 'date-fns/isSameDay';

const DisabledOccupiedDateInput = (props) => {
  const currentRecord = useRecordContext();
  // 拉取全量日程数据，可根据业务数据量调整分页参数
  const { data: allSchedules, isLoading } = useGetList('schedules', {
    pagination: { page: 1, perPage: 1000 },
    // 可选：只拉取需要的字段，减少接口返回体积
    select: (data) => data.map(item => ({
      id: item.id,
      applicableDates: item.applicableDates
    }))
  });

  if (isLoading) return null;

  // 过滤出其他日程已占用的日期
  const occupiedDates = allSchedules
    .filter(item => item.id !== currentRecord?.id)
    .flatMap(item => item.applicableDates);

  // 日期禁用判断逻辑
  const isDateDisabled = (date) => {
    return occupiedDates.some(occurDate => isSameDay(date, occurDate));
  };

  return (
    <DateCalendar
      disablePast
      shouldDisableDate={isDateDisabled}
      // 绑定react-admin表单字段
      {...props}
    />
  );
};

优化提示 #

• 如果你的日程数据总量超过1000条，不建议一次性拉全量，可以给useGetList传入按日期范围过滤的参数，只拉取当前日历面板展示月份范围内的日程数据，减少不必要的数据传输。
• 新建日程场景下currentRecord不存在ID，直接计算所有日程的已占用日期置灰即可，不需要做ID排除。
• 不需要自行封装类Reference的自定义组件，useGetList本身就是react-admin官方对外暴露的公共扩展能力，后续版本升级兼容性远好于修改内部Reference组件逻辑的实现。

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