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

Question

我正在使用React-Admin ，它使用react-final-form作為它使用的表單的基礎組件。

我試圖在提交時僅使用已更改的字段進行 REST 調用。 因此，鑒於字段 A 和字段 B 是要發送到不同 REST 路由的不同資源，鑒於兩者都在表單中，並且只有字段 B 已更改，則應僅將字段 B 發送到后端，因此以防止冗余的多個 API 請求。

無論如何，我看了一下here ，我遇到的問題如下：

我有這個 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');

但是如果我有很多字段，我不想單獨更改所有字段。 是否可以用form.change(...)替換整個values對象？

Answer 1

對於將來遇到此問題的任何人，我通過跟蹤未更改的值，然后在提交時將其值設置為undefined ，設法刪除了不會提交到各自后端 REST 路由的字段。 像這樣的東西，（注意，這與 React-Admin 框架結合使用，但我相信無論您在何處使用 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}
  />
  . . .
)