如何在Edit组件内不使用<SimpleForm>即可访问record记录数据

问题原因 #

你在GenericEdit根作用域调用useRecordContext()的时机不对：
RecordContext是由<Edit>组件在内部拉取完数据后才提供的，且<SimpleForm>也会继承/透传这个上下文。你当前调用Hook的位置在<Edit>组件外部，自然拿不到记录数据；同时<Edit>组件默认负责数据拉取逻辑，所以上层的GenericEdit props 里只会携带路由解析出的id、资源名等元信息，不会包含完整记录。

解决方案 #

提供两种常用实现方式，可按需选择：

方案1：在GenericEdit内主动拉取记录数据

直接用react-admin内置的useGetOne钩子，配合props里的id、resource上下文即可自行拉取完整记录：

import { useGetOne, useResourceContext, Edit, SimpleForm, TextInput } from 'react-admin';

const GenericEdit = function (props) {
    const resource = useResourceContext();
    // 主动拉取当前id对应的记录
    const { data: record, isLoading, error } = useGetOne(resource, { id: props.id });
    
    // 可在这里直接使用record数据做自定义逻辑
    console.log('自行拉取的完整record', record);

    if (isLoading) return <div>加载中</div>;
    if (error) return <div>加载失败</div>;

    return (
        <Edit {...props}>
            <SimpleForm>
                <TextInput disabled label="Id" source="id" />
                <TextInput label="Name" source="name" />
            </SimpleForm>
        </Edit>
    )
};
export default GenericEdit;

方案2：利用<Edit>的内置上下文/渲染属性

<Edit>组件本身已经内置了数据拉取逻辑，你可以通过两种方式拿到它拉好的record：

方式A：用render props直接接收record

const GenericEdit = function (props) {
    return (
        <Edit {...props}>
            {/* Edit的children如果是函数，会自动传入拉取好的record */}
            {({ record }) => {
                // 这里可以直接使用record做自定义逻辑
                console.log('从Edit render props拿到的record', record);
                return (
                    <SimpleForm>
                        <TextInput disabled label="Id" source="id" />
                        <TextInput label="Name" source="name" />
                    </SimpleForm>
                )
            }}
        </Edit>
    )
};

方式B：把自定义逻辑封装为<Edit>的子组件，在子组件内调用useRecordContext

只要是<Edit>包裹的子组件，都可以正常拿到RecordContext的值：

// 抽离自定义逻辑组件
const CustomEditContent = () => {
    const record = useRecordContext();
    // 这里可以正常拿到record
    console.log('子组件内拿到的record', record);
    return (
        <SimpleForm>
            <TextInput disabled label="Id" source="id" />
            <TextInput label="Name" source="name" />
        </SimpleForm>
    )
}

const GenericEdit = function (props) {
    return (
        <Edit {...props}>
            <CustomEditContent />
        </Edit>
    )
};

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