如何在react-final-form中更改onSubmit的表单值？

Question

I'm using React-Admin , which uses react-final-form as it's underlying component for the forms it uses.

I'm trying to make a REST call on submit with only the fields that have been changed. So, given Field A and Field B are different resources that are to be sent to different REST routes, given that both are in the form, and that only Field B has been changed, then only Field B should be sent to the backend, so as to prevent redundant multiple API requests.

Anyway, I took a look here , and the problem that I'm running into is the following:

I have this onSubmit handler:

  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

I managed to change individual field values by doing something like,

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

But if I have many fields, I do not want to change all of them individually. Is it possible to replace the whole values object with form.change(...) ?

Answer 1

To anyone being faced with this issue in the future, I managed to delete the fields that are not to be submitted to their respective backend REST route by tracking the values that have not changed and then setting their value to undefined upon submit. Something like this, (note, this is in conjunction with the React-Admin framework, but I believe it'd work regardless of where you're using react-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}
  />
  . . .
)