React-Admin: как мне вызвать две конечные точки одновременно из одного события клика в пределах <form>

Question

Итак, у меня есть form, который содержит данные о двух таблицах на бэкенде:

• таблица зона и
• таблица area

Обычно метод update в react-admin просто прямой, но в данном случае это не совсем так. Поэтому я взял данные из таблиц zone и area и поместил их в одну форму.

Я также изменил saveButton, чтобы настроить форму values перед отправкой формы в соответствии с этой response-admin документацией , поэтому значения перед отправкой будут в правильной форме.

Проблема в том, что ... Когда я нажимаю кнопку как-то в onClick, мне нужно будет выполнить update на 2 конечных точках с 2 update вызовами dataProvider. Я думал использовать redux-saga для этого случая, но мне еще не повезло.

Приветствуются любые идеи, советы или примеры кода.

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

Один из вышеперечисленных должен заставить вас работать ...