TanStackT
TanStack•10mo ago•
9 replies
urgent-maroon

Form state is inconsistent when using with server action

The following is a simplified version of what I'm currently doing, which is basically aligned with the example shown in the dic:

const [{ successReturn, formState }, action, isSubmitting] = useActionState(
  submitForm,
  { formState: initialFormState },
);

const form = useForm({
  ...formOptions,
  defaultValues,
  transform: useTransform(
    // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
    (baseForm) => mergeForm(baseForm, formState!),
    [formState],
  ),
});

<form.Subscribe selector={({ isSubmitted }) => isSubmitted}>
  {(isSubmitted) => {
    // display a dialog after submit success
  }}
</form.Subscribe>


Yet, I noticed a few things.

1. Form states are still being updated according to the progress of onSubmit, instead of the server action, e.g. isSubmitted is immediately turned to 
true
 after passing the client side validation (since the action is doing the form submition part, instead of onSubmit)
2. I don't seem to be able to overwrite the states, e.g. isSubmiting, in mergeForm. I was trying to overwrite it with the pending state from useActionState.


May I know if anyone has further dig deep om the integration between TabStack Form and server action?
Was this page helpful?