时间戳

首页 > 解决方案 > React-Admin：如何从一个单击事件中同时调用两个端点

javascript - React-Admin：如何从一个单击事件中同时调用两个端点

问题描述

所以我有一个form包含后端两个表的数据：

通常，update方法react-admin很简单，但在这种情况下并非如此。
因此，我从zoneandarea表中获取数据并将其放入一种形式中。

我还根据这个react-admin 文档saveButton更改了在提交表单之前调整表单，因此在提交之前，值是正确的形式。values

挑战在于......
当我以某种方式单击按钮时onClick，我需要通过 2 次调用来执行update2 个端点。我正在考虑使用这种情况，但还没有运气。updatedataProviderredux-saga

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

标签： javascriptreact-admin

解决方案

这里有两种选择：

  • 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} />;
};

以上之一应该让你去......

推荐阅读