Next.js 15中使用useActionState实现CRUD更新操作的表单预填充与状态同步问题

你遇到的核心问题有两个：一是useActionState的初始状态无法动态同步异步获取的albumData，二是表单提交后会回退到初始未编辑的值（尽管数据库更新成功）。这两个问题其实是相关的，下面我来一步步帮你解决：

问题原因分析 #

1. useActionState初始状态的局限性：它的初始状态是在组件首次渲染时确定的，后续异步获取的albumData无法自动更新这个初始值——因为React Hooks必须在组件顶层调用，不能在useEffect这类副作用里动态修改初始状态。
2. 非受控表单的问题：你当前用的是defaultValue，这是一次性的初始值，表单提交后会重置回这个值，而你没有在提交成功后更新这个值，所以看起来像是回到了未编辑状态。

解决方案步骤 #

1. 调整状态结构，包含表单字段

首先扩展你的初始状态，让它不仅包含错误信息，还包含表单的字段值，这样useActionState可以完整管理表单的状态：

const initialState = {
  errors: { errors: [], properties: {} },
  fields: {
    name: '',
    theme: 'Basic',
    code: ''
  }
};

2. 等待数据加载完成后初始化useActionState

因为albumData是异步获取的，我们可以先等待数据加载完成，再初始化useActionState，这样初始状态就能直接用上数据库的数值：

export default function Page() {
  const params = useParams<{ id?: string }>();
  const albumId = params?.id;
  const [albumData, setAlbumData] = useState<{ name?: string; theme?: string; code?: string }>();
  const [isLoaded, setIsLoaded] = useState(false);

  useEffect(() => {
    async function fetchData() {
      if (albumId) {
        const data = await fetchAlbumData(albumId);
        setAlbumData(data);
      }
      setIsLoaded(true);
    }
    fetchData();
  }, [albumId]);

  // 等待数据加载完成再渲染表单和初始化useActionState
  if (!isLoaded) {
    return <div>Loading album data...</div>;
  }

  // 初始化useActionState，用albumData填充初始字段值
  const initialFormState = {
    ...initialState,
    fields: albumData ? {
      name: albumData.name || '',
      theme: albumData.theme || 'Basic',
      code: albumData.code || ''
    } : initialState.fields
  };

  const [state, formAction, pending] = useActionState<any, any>(createAlbum, initialFormState);

3. 改用受控表单，绑定state.fields的值

把defaultValue换成value，绑定到state.fields的对应字段，这样表单会实时同步useActionState的状态，提交后也会显示最新的返回值：

<TextInput
  name="name"
  type="text"
  placeholder="My Album"
  required
  value={state.fields.name}
/>

下拉选择框同理：

<Select
  name="theme"
  required
  value={state.fields.theme}
>
  <option>Basic</option>
  <option>Fancy</option>
</Select>

4. 修改服务器端Action，返回更新后的字段值

关键的一步：让你的createAlbum服务器Action在处理完更新后，返回包含最新字段值的状态对象，这样提交后useActionState会自动更新表单状态：

export async function createAlbum(prevState: any, formData: FormData) {
  try {
    const albumId = formData.get('id') as string;
    const albumData = {
      name: formData.get('name') as string,
      theme: formData.get('theme') as string,
      code: formData.get('code') as string
    };

    let updatedAlbum;
    if (albumId) {
      // 执行更新操作
      updatedAlbum = await updateAlbum(albumId, albumData);
    } else {
      // 执行创建操作
      updatedAlbum = await createNewAlbum(albumData);
    }

    // 返回包含最新字段和空错误的状态
    return {
      ...prevState,
      errors: { errors: [], properties: {} },
      fields: {
        name: updatedAlbum.name,
        theme: updatedAlbum.theme,
        code: updatedAlbum.code || ''
      }
    };
  } catch (error) {
    // 处理错误，返回错误信息
    return {
      ...prevState,
      errors: {
        errors: ['Failed to save album'],
        properties: {
          // 这里可以添加字段级错误，比如name的错误
        }
      }
    };
  }
}

额外说明 #

关于你提到的“是否应该用useActionState处理数据库项”的疑问：useActionState完全可以用来处理CRUD操作，它的核心优势是原生集成Next.js的服务器Action，简化表单提交后的状态管理。你之前遇到的问题只是因为初始状态的同步和表单受控性的处理不当，并不是useActionState本身不适合这个场景。

内容来源于stack exchange