具有Admin-on-rest的Master-Detail (父子)输入表单

基础概念

Admin-on-rest 是一个用于构建管理界面的React框架，它提供了一系列组件和工具来简化CRUD（创建、读取、更新、删除）操作。Master-Detail（父子）输入表单是指在一个界面中同时展示和处理主记录（Master）和与之关联的详细记录（Detail）的表单。

类型

单详细记录：主记录关联一个详细记录。
多详细记录：主记录关联多个详细记录。

应用场景

订单管理系统：一个订单（Master）包含多个订单项（Detail）。
产品目录：一个产品（Master）有多个规格或变体（Detail）。
项目管理：一个项目（Master）有多个任务（Detail）。

示例代码

以下是一个简单的Master-Detail表单示例，使用Admin-on-rest框架：

import * as React from 'react';
import { List, Datagrid, TextField, Edit, Create, SimpleForm, TextInput, ReferenceInput, SelectInput, TabbedForm, FormTab } from 'admin-on-rest';

export const ProductList = (props) => (
    <List {...props}>
        <Datagrid>
            <TextField source="id" />
            <TextField source="name" />
            <EditButton />
        </Datagrid>
    </List>
);

export const ProductEdit = (props) => (
    <Edit {...props}>
        <TabbedForm>
            <FormTab label="General">
                <TextInput source="name" />
            </FormTab>
            <FormTab label="Variants">
                <ReferenceInput source="productId" reference="products" allowEmpty>
                    <SelectInput optionText="name" />
                </ReferenceInput>
                <ProductVariantList />
            </FormTab>
        </TabbedForm>
    </Edit>
);

export const ProductVariantList = (props) => (
    <List {...props}>
        <Datagrid>
            <TextField source="id" />
            <TextField source="color" />
            <TextField source="size" />
            <EditButton />
        </Datagrid>
    </List>
);

export const ProductVariantEdit = (props) => (
    <Edit {...props}>
        <SimpleForm>
            <TextInput source="color" />
            <TextInput source="size" />
        </SimpleForm>
    </Edit>
);

遇到的问题及解决方法

问题：在编辑主记录时，详细记录的数据没有及时更新。

原因：可能是由于数据同步机制没有正确设置，导致主记录和详细记录之间的数据不同步。

解决方法：

使用useEffect钩子：在详细记录组件中使用React的useEffect钩子来监听主记录的变化，并相应地更新详细记录。
手动触发更新：在主记录编辑完成后，手动触发详细记录的重新获取或更新操作。

import { useEffect } from 'react';
import { useRecordContext } from 'admin-on-rest';

const ProductVariantList = (props) => {
    const record = useRecordContext();

    useEffect(() => {
        // 触发详细记录的重新获取或更新操作
        console.log('Product changed:', record);
    }, [record]);

    return (
        <List {...props}>
            <Datagrid>
                <TextField source="id" />
                <TextField source="color" />
                <TextField source="size" />
                <EditButton />
            </Datagrid>
        </List>
    );
};

通过这种方式，可以确保主记录和详细记录之间的数据始终保持同步。