在React-Admin中一键更新一个表单中的2个端点

Question

所以我有一个表单，其中包含有关后端两个表的数据。让我们将一个表区域称为另一个表区域。

通常，react-admin中的更新过程很简单，但是在这种情况下不是。因此，我已经从区域和区域中获取了数据，并将它们放在一种形式中。在根据此文档提交表单之前，我还更改了saveButton来更改表单值：https://marmelab.com/react-admin/doc/2.9/Actions.html，因此，在提交之前，值的格式正确。

现在，当我以某种方式单击onClick中的按钮时，我需要在两个端点上执行对dataprovider的2次UPDATE调用来执行更新。我本想在这种情况下使用传奇，但还没有运气。

欢迎任何想法，提示或代码示例。

Answer 1

这里有两种选择：

• 单击两次即可调用两个dataProvider.updates。另外，您可以直接fetch()以获得更大的灵活性。 （您可能希望使用React.useCallback和async以获得更好的性能）

export const SaveButton = ({
  basePath = '',
  label = 'Save',
  record,
  ...rest
}) => {
  const handleClick = () => {
    if (record !== undefined) {
      // first call -> Zone
      async () => await dataProvider.update(...);
      // Second call -> Area
      async() => await dataProvider.update(...);
    }
  };
  return <Button label={label} onClick={handleClick} {...rest} />;
};

• 声明两个函数以分别调用每个调用dataProvider.update。如果您打算在同一clickEvent]中触发其他任何component之后执行相同的调用，则将为您提供灵活性

export const SaveButton = ({
  basePath = '',
  label = 'Save',
  record,
  ...rest
}) => {
  const handleClick = () => {
    if (record !== undefined) {
      // first call -> Zone
      handleZoneCall();
      // second call -> Area
      handleAreaCall();   
    }
  };

  const handleZoneCall = async () => await dataProvider.update(...);
  const handleAreaCall = async() => await dataProvider.update(...);

  return <Button label={label} onClick={handleClick} {...rest} />;
};
以上其中一项应带您去...