编辑页:仅提交变更字段
- 编辑页示例使用
transform对提交数据做浅层 diff,只发送发生变化的字段; mutationMode="pessimistic"让编辑提交过程更可控;
src/customers/CustomersEdit.tsx
import { Edit, SimpleForm, TextInput, NumberInput } from "@/components/admin";
import { required } from "ra-core";
// 计算浅层变更:仅返回与 previousData 不同的字段
const diffChanged = (
data: Record<string, any>,
previous?: Record<string, any>,
) => {
if (!previous) return data;
const changed: Record<string, any> = {};
const isEqual = (a: any, b: any) => {
try {
return JSON.stringify(a) === JSON.stringify(b);
} catch {
return a === b;
}
};
for (const key of Object.keys(data)) {
if (!isEqual(data[key], previous[key])) {
changed[key] = data[key];
}
}
return changed;
};
export const CustomersEdit = () => (
<Edit
mutationMode="pessimistic"
// 在保存前只发送变更字段,避免未变化的值被更新
transform={(data, options) => diffChanged(data as any, options?.previousData as any)}
>
<SimpleForm>
<TextInput source="name" label="名称" validate={required()} />
<NumberInput source="age" label="年龄" />
<TextInput source="email" label="邮箱" type="email" />
</SimpleForm>
</Edit>
);
export default CustomersEdit;