react-admin中SaveButton使用transform prop报setTransform不是函数求解决方案

问题原因 #

react-admin v4及以上版本中，transform属性本身是SimpleForm、Edit、Create这类表单根容器的配置项，不支持直接传给SaveButton组件。直接给SaveButton传transform时，按钮内部没有对应的表单上下文方法来接收这个转换函数，就会抛出setTransform is not a function的错误。

可行解决办法 #

方案1：自定义按钮配合表单上下文实现按需转换 #

适合有多个操作按钮（接受/拒绝）需要不同转换逻辑的场景：

import { useFormContext, useSaveContext } from 'react-admin';
import Button from '@mui/material/Button';

const ApproveButton = () => {
  const { getValues } = useFormContext();
  const { save } = useSaveContext();

  const handleApprove = () => {
    const data = getValues();
    // 直接在这里做数据转换
    const transformedData = {...data, approval: true };
    save(transformedData, { redirectTo: 'list' });
  };

  return <Button onClick={handleApprove}>Approve</Button>;
};

// 拒绝按钮同理
const RejectButton = () => {
  const { getValues } = useFormContext();
  const { save } = useSaveContext();

  const handleReject = () => {
    const data = getValues();
    const transformedData = {...data, approval: false };
    save(transformedData, { redirectTo: 'list' });
  };

  return <Button onClick={handleReject}>Reject</Button>;
};

之后把自定义按钮放到表单的Toolbar组件中即可正常使用。

方案2：把转换逻辑提到表单容器层，通过状态区分操作 #

如果不想自定义按钮，也可以在表单层声明transform，配合按钮传的状态来走不同的转换逻辑：

import { useState } from 'react';
import { SimpleForm, SaveButton, Toolbar } from 'react-admin';

const CustomToolbar = ({ setApprovalStatus }) => (
  <Toolbar>
    <SaveButton
      redirect="list"
      label="Approve"
      onClick={() => setApprovalStatus(true)}
    />
    <SaveButton
      redirect="list"
      label="Reject"
      onClick={() => setApprovalStatus(false)}
    />
  </Toolbar>
);

const YourForm = () => {
  const [approvalStatus, setApprovalStatus] = useState(null);

  const transform = (data) => {
    if (approvalStatus === null) return data;
    return {...data, approval: approvalStatus };
  };

  return (
    <SimpleForm transform={transform} toolbar={<CustomToolbar setApprovalStatus={setApprovalStatus} />}>
      {/* 你的表单字段定义 */}
    </SimpleForm>
  );
};

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