Next.js 13 Server Actions中useState状态无法更新是否为预期行为？

这是预期行为，并非Next.js的bug。核心原因是你直接在表单action属性中定义的异步函数，存在组件渲染上下文不匹配的问题：

当表单提交触发Server Action时，React会触发组件重新渲染，但你在action内调用的setIsUploadingDocs是在旧的组件渲染上下文中执行的，新的渲染无法捕获到这个状态更新，导致UI无法响应变化。

如果想继续用useState实现上传状态管理，正确的做法是将Server Action的调用逻辑抽离到组件内的独立函数中，结合表单的action属性使用：

'use client';

import { useState } from 'react';
import { upload } from '@/app/actions'; // 假设upload是已定义的Server Action

export default function UploadForm() {
  const [isUploadingDocs, setIsUploadingDocs] = useState<boolean>(false);

  const handleSubmit = async (formData: FormData) => {
    setIsUploadingDocs(true);
    try {
      await upload(formData);
    } finally {
      setIsUploadingDocs(false);
    }
  };

  return (
    <form action={handleSubmit}>
      {/* 表单输入项 */}
      <button type="submit" disabled={isUploadingDocs}>
        {isUploadingDocs ? '上传中...' : '提交'}
      </button>
    </form>
  );
}

另外，关于useFormStatus的使用，你需要注意它必须在表单的子组件中使用才能生效，比如单独封装提交按钮：

'use client';

import { useFormStatus } from 'react-dom';

function SubmitButton() {
  const { pending } = useFormStatus();
  return (
    <button type="submit" disabled={pending}>
      {pending ? '上传中...' : '提交'}
    </button>
  );
}

// 在表单组件中引入使用
export default function UploadForm() {
  return (
    <form action={upload}> {/* upload为定义好的Server Action */}
      {/* 表单输入项 */}
      <SubmitButton />
    </form>
  );
}

总结 #

• 直接在form的action内联函数中调用setState无法触发UI更新是预期行为，根源是渲染上下文不匹配
• 将提交逻辑抽离到组件内的独立函数，配合useState可以正常管理状态
• useFormStatus需要在表单的子组件中使用，才能正确获取提交状态

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