Next.js使用Server Action提交表单后内容清空问题求助

我正在使用Next.js结合Form Actions搭建一个提交至服务器的简单表单（采用React Server Action），服务器已成功接收表单数据，但完成提交后表单内容被清空，用户输入丢失。

相关代码（省略验证逻辑）：

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);
}

服务器控制台输出：

[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] }

使用版本："next": "15.0.2"和"react": "19.0.0-rc-02c0e824-20241028"

核心原因 #

1. 默认情况下，Next.js Form Actions提交后会触发组件重新渲染/页面刷新，而表单未绑定状态来保留用户输入，导致刷新后内容清空。
2. 代码存在字段属性错误：两个输入框name均为firstName，导致提交数据冲突；id与name不匹配，不符合表单规范。

解决步骤 #

1. 修正表单字段属性 #

确保每个输入框name唯一，且id与name一致：

'use client';

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

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

2. 保留表单输入内容（推荐方案：useFormState） #

通过useFormState钩子，让Server Action返回用户输入并回填到表单：

'use client';

import { useFormState } from 'react-dom';
import { submitForm } from '../actions/validateFormAction';

const initialState = { firstName: '', lastName: '' };

export function Form() {
  const [state, formAction] = useFormState(submitForm, initialState);

  return (
    <form action={formAction}>
      <input 
        name="firstName" 
        id="firstName" 
        placeholder="First name" 
        defaultValue={state.firstName} 
      />
      <input 
        name="lastName" 
        id="lastName" 
        placeholder="Last name" 
        defaultValue={state.lastName} 
      />
      <input type="submit" />
    </form>
  );
}

同步修改Server Action，返回表单数据：

'use server';

export async function submitForm(prevState: any, data: FormData): Promise<any> {
  const firstName = data.get('firstName') as string;
  const lastName = data.get('lastName') as string;
  console.log('submitForm action', { firstName, lastName });
  // 返回输入内容用于回填
  return { firstName, lastName };
}

3. 关于Fast Refresh的说明 #

浏览器控制台的[Fast Refresh] rebuilding是Next.js开发环境的热更新机制，和表单清空问题无关，属于正常现象。

内容的提问来源于stack exchange，提问作者fikkatra