reactjs - Next.js forms with server action: form gets emptied after submit - Stack Overflow

admin管理员组

文章数量:1023764

I'm using Next.js with form actions to set up a simple form that gets submitted to the server (with a react server action). I can see the form data being received on the server. Unfortunately, once the server action is finished, the form is emptied and the user input is lost.

Any idea why this happens?

Here's the code (I omitted the validation logic for simplicity):

/// Form.tsx
'use client';

import { submitForm } from '../actions/validateFormAction';

export function Form() {
  return (
    <form action={submitForm}>
      <input name="firstName" id="lastName" placeholder="First name" />
      <input name="firstName" id="lastName" placeholder="Last name" />
      <input type="submit" />
    </form>
  );
}

/// validateFormAction.ts
'use server';

export async function submitForm(data: FormData): Promise<void> {
  console.log('submitForm action', data);
}

Before submitting:

Server console output:

[1] submitForm action FormData {
[1]   [Symbol(state)]: [
[1]     {
[1]       name: '$ACTION_ID_4064bf5eac761f0b8f1771e13eed9498134e43b11e',
[1]       value: ''
[1]     },
[1]     { name: 'firstName', value: 'my first name' },
[1]     { name: 'firstName', value: 'my last name' }
[1]   ]
[1] }

After submitting:

The browser console mentions [Fast Refresh] rebuilding (although I don't know whether this is relevant).

Using "next": "15.0.2" and "react": "19.0.0-rc-02c0e824-20241028".

Any help would be appreciated.

I'm using Next.js with form actions to set up a simple form that gets submitted to the server (with a react server action). I can see the form data being received on the server. Unfortunately, once the server action is finished, the form is emptied and the user input is lost.

Any idea why this happens?

Here's the code (I omitted the validation logic for simplicity):

/// Form.tsx
'use client';

import { submitForm } from '../actions/validateFormAction';

export function Form() {
  return (
    <form action={submitForm}>
      <input name="firstName" id="lastName" placeholder="First name" />
      <input name="firstName" id="lastName" placeholder="Last name" />
      <input type="submit" />
    </form>
  );
}

/// validateFormAction.ts
'use server';

export async function submitForm(data: FormData): Promise<void> {
  console.log('submitForm action', data);
}

Before submitting:

Server console output:

[1] submitForm action FormData {
[1]   [Symbol(state)]: [
[1]     {
[1]       name: '$ACTION_ID_4064bf5eac761f0b8f1771e13eed9498134e43b11e',
[1]       value: ''
[1]     },
[1]     { name: 'firstName', value: 'my first name' },
[1]     { name: 'firstName', value: 'my last name' }
[1]   ]
[1] }

After submitting:

The browser console mentions [Fast Refresh] rebuilding (although I don't know whether this is relevant).

Using "next": "15.0.2" and "react": "19.0.0-rc-02c0e824-20241028".

Any help would be appreciated.

• reactjs
• next.js

Share Improve this question Follow edited Nov 25, 2024 at 8:58 fikkatra asked Nov 18, 2024 at 21:53 fikkatrafikkatra 5,84244 gold badges4444 silver badges7474 bronze badges 8

• 1 I'm not sure about what i'll say here, just trying to help. But this behavior is probably not from react-hook-form (see: stackoverflow/questions/62741410/…). It seems more like something related to SSR + Form submitting. When form is submitted it may trigger SSR's mechanism to update the page (which is why it's rebuilding). When the page is reloaded, the form is cleared. If you're wanting to stop this behavior, maybe catching the event and preventing the propagation solves it – Alexander Santos Commented Nov 18, 2024 at 22:09
• 1 @AlexanderSantos you are right, when removing RHF, it shows the same behavior. I'll update the question to reflect this. – fikkatra Commented Nov 19, 2024 at 7:28
• 1 you can either save the input in a react state through onChange event or you can get the data in the action and send it back with const [state, action] = useActionState() – Evilolipop Commented Nov 26, 2024 at 9:02
• @Evilolipop that seems to be the correct conclusion. However, it worked fine in Next 14, and not anymore in Next 15 :/ – fikkatra Commented Nov 27, 2024 at 10:35
• 1 @fikkatra It still works I think. const [state, action] = useActionState(ac, initialState), then <input name="firstName" id="firstName" defaultValue={state.firstName} /> – Evilolipop Commented Nov 28, 2024 at 10:06

 |  Show 3 more comments

1 Answer 1

Sorted by: Reset to default 4

After raising the issue with the Next.js team on their Github, they replied that this behavior is React-related and by design. There's an open discussion on the React Github and a feature request to opt out of the form resetting behavior. The discussion also contains some workarounds, one of which suggests to do this:

function handleSubmit(event) {
  event.preventDefault();
  const formData = new FormData(event.target);
  startTransition(() => action(formData));
}

...

<form onSubmit={handleSubmit}>

instead of:

<form action={action}>

I'm using Next.js with form actions to set up a simple form that gets submitted to the server (with a react server action). I can see the form data being received on the server. Unfortunately, once the server action is finished, the form is emptied and the user input is lost.

Any idea why this happens?

Here's the code (I omitted the validation logic for simplicity):

/// Form.tsx
'use client';

import { submitForm } from '../actions/validateFormAction';

export function Form() {
  return (
    <form action={submitForm}>
      <input name="firstName" id="lastName" placeholder="First name" />
      <input name="firstName" id="lastName" placeholder="Last name" />
      <input type="submit" />
    </form>
  );
}

/// validateFormAction.ts
'use server';

export async function submitForm(data: FormData): Promise<void> {
  console.log('submitForm action', data);
}

Before submitting:

Server console output:

[1] submitForm action FormData {
[1]   [Symbol(state)]: [
[1]     {
[1]       name: '$ACTION_ID_4064bf5eac761f0b8f1771e13eed9498134e43b11e',
[1]       value: ''
[1]     },
[1]     { name: 'firstName', value: 'my first name' },
[1]     { name: 'firstName', value: 'my last name' }
[1]   ]
[1] }

After submitting:

The browser console mentions [Fast Refresh] rebuilding (although I don't know whether this is relevant).

Using "next": "15.0.2" and "react": "19.0.0-rc-02c0e824-20241028".

Any help would be appreciated.

I'm using Next.js with form actions to set up a simple form that gets submitted to the server (with a react server action). I can see the form data being received on the server. Unfortunately, once the server action is finished, the form is emptied and the user input is lost.

Any idea why this happens?

Here's the code (I omitted the validation logic for simplicity):

/// Form.tsx
'use client';

import { submitForm } from '../actions/validateFormAction';

export function Form() {
  return (
    <form action={submitForm}>
      <input name="firstName" id="lastName" placeholder="First name" />
      <input name="firstName" id="lastName" placeholder="Last name" />
      <input type="submit" />
    </form>
  );
}

/// validateFormAction.ts
'use server';

export async function submitForm(data: FormData): Promise<void> {
  console.log('submitForm action', data);
}

Before submitting:

Server console output:

[1] submitForm action FormData {
[1]   [Symbol(state)]: [
[1]     {
[1]       name: '$ACTION_ID_4064bf5eac761f0b8f1771e13eed9498134e43b11e',
[1]       value: ''
[1]     },
[1]     { name: 'firstName', value: 'my first name' },
[1]     { name: 'firstName', value: 'my last name' }
[1]   ]
[1] }

After submitting:

The browser console mentions [Fast Refresh] rebuilding (although I don't know whether this is relevant).

Using "next": "15.0.2" and "react": "19.0.0-rc-02c0e824-20241028".

Any help would be appreciated.

• reactjs
• next.js

Share Improve this question Follow edited Nov 25, 2024 at 8:58 fikkatra asked Nov 18, 2024 at 21:53 fikkatrafikkatra 5,84244 gold badges4444 silver badges7474 bronze badges 8

• 1 I'm not sure about what i'll say here, just trying to help. But this behavior is probably not from react-hook-form (see: stackoverflow/questions/62741410/…). It seems more like something related to SSR + Form submitting. When form is submitted it may trigger SSR's mechanism to update the page (which is why it's rebuilding). When the page is reloaded, the form is cleared. If you're wanting to stop this behavior, maybe catching the event and preventing the propagation solves it – Alexander Santos Commented Nov 18, 2024 at 22:09
• 1 @AlexanderSantos you are right, when removing RHF, it shows the same behavior. I'll update the question to reflect this. – fikkatra Commented Nov 19, 2024 at 7:28
• 1 you can either save the input in a react state through onChange event or you can get the data in the action and send it back with const [state, action] = useActionState() – Evilolipop Commented Nov 26, 2024 at 9:02
• @Evilolipop that seems to be the correct conclusion. However, it worked fine in Next 14, and not anymore in Next 15 :/ – fikkatra Commented Nov 27, 2024 at 10:35
• 1 @fikkatra It still works I think. const [state, action] = useActionState(ac, initialState), then <input name="firstName" id="firstName" defaultValue={state.firstName} /> – Evilolipop Commented Nov 28, 2024 at 10:06

 |  Show 3 more comments

1 Answer 1

Sorted by: Reset to default 4

After raising the issue with the Next.js team on their Github, they replied that this behavior is React-related and by design. There's an open discussion on the React Github and a feature request to opt out of the form resetting behavior. The discussion also contains some workarounds, one of which suggests to do this:

function handleSubmit(event) {
  event.preventDefault();
  const formData = new FormData(event.target);
  startTransition(() => action(formData));
}

...

<form onSubmit={handleSubmit}>

instead of:

<form action={action}>

本文标签： reactjsNextjs forms with server action form gets emptied after submitStack Overflow