Next.js中用useActionState实现带分页表格的服务端数据更新与展示

问题核心 #

点击分页切换页码时，服务端已返回新的分页数据，但客户端的serverState没有更新，导致表格内容无法同步变化。

错误原因 #

在handlePageChange中直接调用了服务端函数fetchPeople，而非使用useActionState返回的formAction函数。useActionState的状态更新机制依赖其提供的formAction来同步服务端返回的状态到客户端，直接调用服务端函数不会触发客户端状态更新。

修复步骤 #

1. 替换服务端函数调用方式：在handlePageChange中使用formAction代替直接调用fetchPeople，并传递formData和page参数
2. 用startTransition包裹调用：和表单提交逻辑保持一致，避免UI卡顿

修改后的代码示例 #

StepOneForm.tsx（关键部分修改） #

"use client"

import { useActionState, useRef, startTransition } from 'react';
import fetchPeople from '@/actions/people';
import { getPages } from './utils';

export default function StepOneForm() {
  const [serverState, formAction, isPending] = useActionState(fetchPeople, {});
  const formRef = useRef<HTMLFormElement | null>(null);

  const totalPages = serverState.pagination?.total_pages ?? 0;
  const currentPage = serverState.pagination?.page || 1;
  const totalEntries = serverState.pagination?.total_entries;

  const pagination = getPages({ totalPages, currentPage });

  async function handlePageChange(page: number) {
    if (formRef.current) {
      const formData = new FormData(formRef.current);
      // 关键修改：使用formAction触发服务端动作，并用startTransition包裹
      startTransition(() => {
        formAction(formData, page);
      });
    }
  }

  const handleSubmit = async (event: React.FormEvent) => {
    event.preventDefault();
    const formData = new FormData(event.target as HTMLFormElement);

    startTransition(() => {
      formAction(formData);
    });
  };

  // 其余JSX代码保持不变...
}

服务端函数（actions/people.ts）无需修改 #

服务端函数的参数顺序prevState, formData, page完全适配formAction的调用逻辑，formAction会自动将prevState作为第一个参数传递，后续参数依次对应formData和page。

修复原理 #

• formAction是useActionState提供的绑定函数，调用它会触发服务端动作，并自动将服务端返回的结果同步更新到客户端的serverState中
• startTransition标记这是一个非紧急更新，React会优先处理其他UI交互，避免分页切换时出现卡顿

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