Как изменить значения формы на SubMub в реакции-окончательной форме?

Question

Я использую React-Admin , который использует response-final-form в качестве основного компонента для форм, которые он использует.

Я пытаюсь сделать вызов REST при отправке только с теми полями, которые были изменены. Таким образом, учитывая, что поле A и поле B представляют собой разные ресурсы, которые должны отправляться на разные маршруты REST, учитывая, что оба находятся в форме, и что только поле B было изменено, тогда только поле B должно быть отправлено на сервер, так что чтобы предотвратить избыточные множественные запросы API.

Во всяком случае, я посмотрел здесь , и проблема, с которой я сталкиваюсь, заключается в следующем:

У меня есть это Обработчик onSubmit:

  const handleClick = useCallback(() => {
    // prints 'before' value
    console.log(JSON.parse(JSON.stringify(form.getState().values)));

    const values = form.getState().values;

    // take out Field A, because Field A is NOT to be sent in the request
    const { FieldA, ...valuesToSubmit } = values;

    // How can I do this part? <------
    form.change('values', valuesToSubmit);

    handleSubmitWithRedirect(redirect);
  }, [form]); // useForm hook for react-final-form

Мне удалось изменить значения отдельных полей, выполнив что-то вроде

form.change('FieldB', 'test');

Но если у меня много полей, я не хочу менять их все по отдельности , Можно ли заменить весь объект values на form.change(...)?

Answer 1

Всем, кто столкнулся с этой проблемой в будущем, мне удалось удалить поля, которые не должны быть отправлены на их соответствующий бэкэнд-маршрут REST, отслеживая значения, которые не изменились, и затем установив их значение на undefined после Отправить. Примерно так (обратите внимание, что это связано со структурой React-Admin, но я считаю, что это будет работать независимо от того, где вы используете response-final-form.

. . .
const { handleSubmitWithRedirect, redirect } = props;

const handleClick = useCallback(() => {
  // The field that I don't want sent to the backend
  form.change('fieldA', undefined);

  handleSubmitWithRedirect(redirect);
}, [form]);

. . .

return (
  . . .
  <SaveButton
    handleSubmitWithRedirect={handleClick}
  />
  . . .
)