如何在不使用 <SimpleForm> 的情况下访问 Edit 函数中的记录？答案

【问题标题】：How to access record inside Edit function without having to use <SimpleForm>?如何在不使用 <SimpleForm> 的情况下访问 Edit 函数中的记录？
【发布时间】：2022-01-02 23:18:03
【问题描述】：

我在 App.tsx 中有一个 <Ressource> 声明如下：

<Resource name="myresource" list={ListGuesser} edit={GenericEdit}/>

GenericEdit的代码：

const GenericEdit = function (props) {
    console.log('props', props);
    console.log('useResourceContext()', useResourceContext());
    console.log('useRecordContext()', useRecordContext());
    return (
        <>
            <Edit {...props}>
                <SimpleForm>
                    <TextInput disabled label="Id" source="id" />
                    <TextInput label="Name" source="name" />
                </SimpleForm>
            </Edit>
        </>)
};
export default GenericEdit;

<Edit><SimpleForm> 默认设置效果很好（即记录数据在表单内呈现），但是我希望能够以我自己的方式使用record 数据：

props 仅包含元数据（URL 路径、资源类型等...）+ 记录 id，但没有其他记录数据
useResourceContext() 返回资源类型（在我的例子中是“campaign”）
useRecordContext() 不返回任何内容

问：如何在我的编辑功能 (GenericEdit) 中访问记录数据，而不必依赖默认的 <SimpleForm> 功能？

【问题讨论】：

你看过不同的 dataprovider 钩子了吗？在这种情况下，useGetOne 可能有助于查找一条记录的详细信息：marmelab.com/react-admin/… 和更多信息：marmelab.com/react-admin/Actions.html
问题是dataProvider 默认情况下已经发出 1 个请求，因为我们要去edit 列表，所以这会对我们应该已经拥有的数据发出另一个不必要的请求

标签： react-admin

【解决方案1】：

来自 React 管理员支持的回答，对我有用：

Edit 组件获取数据并将其传递给它的子组件。在为了访问获取数据，您必须添加一个中间组件并使用 useRecordContext 钩子。

const MyForm = props => {
    const record = useRecordContext(props);
    console.log({ record });
    return (
        <>
            {/* We can still use the built-in React Admin */}
            <SimpleForm {...props}>
                <TextInput source="id" />
            </SimpleForm>
            {/* Or use something custom */}
            <div>{JSON.stringify(record)}</div>
        </>
    );
};

const GenericEdit = props => (
    // Here, the data hasn't been fetched yet 
    <Edit {...props} >
        <MyForm />
    </Edit>
);
export default GenericEdit;

【讨论】：

您似乎想在不使用和的情况下接收数据？
最初是的，因为我认为我会坚持以 react-admin 的方式进行操作。但事实证明，一旦你进入<Edit>，你就有了record，并且可以随心所欲地使用它。我将相应地改写这个问题。

【解决方案2】：

您可以使用 Edit 和 EditView 组件的源代码来实现您的表单显示。在原文中可以看到是Edit提供了记录数据的传输：Edit.tsx,EditView.tsx

export const Edit = ( props: EditProps & { children: ReactElement } ): ReactElement => {

    useCheckMinimumRequiredProps('Edit', ['children'], props);
    const controllerProps = useEditController(props);

    const body = (
        <EditContextProvider value={controllerProps}>       
            <EditView {...props} {...controllerProps} /> // Your component for displaying form            
        </EditContextProvider>
    );

    return props.resource ? (
        // support resource override via props
        <ResourceContextProvider value={props.resource}>
            {body}
        </ResourceContextProvider>
    ) : (
        body
    );
};

【讨论】：