如何在admin on rest的Edit页面访问当前记录以执行条件任务？

嘿，我之前刚好踩过这个坑！在Admin-on-Rest的Edit页面里获取当前记录并基于它的属性执行条件任务，其实有几种很实用的方法，我给你一步步说清楚：

方法1：直接从Edit组件的Props中获取（最常用） #

当你自定义Edit页面组件时，Admin-on-Rest会自动把当前加载的记录通过record prop传递给组件。你可以直接解构这个prop来使用：

import { Edit, SimpleForm, TextInput, DateInput } from 'admin-on-rest';

const CustomEditPage = (props) => {
  // 解构出当前记录，注意一开始可能为null（数据加载中）
  const { record } = props;

  // 基于记录属性执行条件判断
  const requiresApproval = record?.status === 'pending' && record?.priority === 'high';

  return (
    <Edit title="编辑记录" {...props}>
      <SimpleForm>
        <TextInput source="title" disabled={requiresApproval} />
        <DateInput source="createdAt" disabled />
        {/* 条件渲染额外字段 */}
        {requiresApproval && <TextInput source="approvalNotes" label="审批备注" />}
      </SimpleForm>
    </Edit>
  );
};

export default CustomEditPage;

这里要注意：record在组件初始化时可能是null（因为Admin-on-Rest需要先从后端拉取数据），所以用可选链操作符?.来避免报错是个好习惯。

方法2：在自定义组件中从Redux Store获取 #

如果你的条件任务需要在独立的自定义Field/Input组件中执行，你可以通过Redux的useSelector钩子直接从store中读取当前记录：

import { useSelector } from 'react-redux';

const CustomStatusBadge = () => {
  // 获取当前路由中的记录ID
  const recordId = useSelector(state => state.admin.route.match.params.id);
  // 获取当前操作的资源名称（比如'posts'、'users'）
  const currentResource = useSelector(state => state.admin.resource);
  // 从资源数据中拿到完整记录
  const record = useSelector(state => state.admin.resources[currentResource]?.data[recordId]);

  if (!record) return <span>加载中...</span>;

  // 根据属性渲染不同样式的徽章
  switch (record.status) {
    case 'active':
      return <span style={{ color: 'green', fontWeight: 'bold' }}>已激活</span>;
    case 'pending':
      return <span style={{ color: 'orange' }}>待审核</span>;
    default:
      return <span style={{ color: 'gray' }}>已禁用</span>;
  }
};

这种方式适合那些需要跨组件共享记录数据的场景，不用手动传递record prop。

方法3：在组件初始化/更新时执行条件任务 #

如果你需要在记录加载完成后自动执行某些逻辑（比如发起额外请求、更新状态），可以用useEffect钩子监听record的变化：

import { Edit, SimpleForm } from 'admin-on-rest';
import { useEffect, useState } from 'react';

const EditWithConditionalTask = (props) => {
  const { record } = props;
  const [relatedData, setRelatedData] = useState(null);

  useEffect(() => {
    // 确保记录已加载
    if (record && record.categoryId) {
      // 基于记录的categoryId发起请求，获取关联数据
      fetch(`/api/categories/${record.categoryId}`)
        .then(res => res.json())
        .then(data => setRelatedData(data));
    }
  }, [record]); // 当record变化时重新执行

  return (
    <Edit {...props}>
      <SimpleForm>
        {/* 表单字段 */}
        {relatedData && <p>所属分类：{relatedData.name}</p>}
      </SimpleForm>
    </Edit>
  );
};

这个方法特别适合需要根据记录属性动态获取额外数据的场景。

总的来说，最直接的方式就是利用Edit组件传递的record prop，大部分场景下都够用。如果是复杂的组件嵌套场景，再考虑从Redux Store中读取~

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