Next.js使用useFormStatus报错：TypeError提示该函数不存在

1. 确认React/React DOM版本达标 #

useFormStatus是React 18.2.0及以上版本才新增的API，先检查package.json里的react和react-dom版本：

• 若版本低于18.2.0，执行升级命令：

  npm install react@latest react-dom@latest
  # 或用yarn
  yarn add react@latest react-dom@latest
  # 或pnpm
  pnpm add react@latest react-dom@latest
  

2. 确保组件是客户端组件且导入正确 #

• 在你的SubmitButton组件顶部必须添加'use client'指令，因为useFormStatus属于客户端API，只能在客户端组件中使用。
• 确认导入路径：React 18.2+中正确导入方式是从react-dom引入：

  'use client';
  import { useFormStatus } from 'react-dom';
  
  export default function SubmitButton() {
    const { pending } = useFormStatus();
    return (
      <button type="submit" disabled={pending}>
        {pending ? '发送中...' : '提交'}
      </button>
    );
  }
  

3. 组件必须放在表单内部 #

useFormStatus的上下文依赖父级表单，所以SubmitButton必须直接嵌套在<form>标签内部，不能脱离表单上下文。示例用法：

// 页面组件（App Router下可为服务器组件）
import SubmitButton from './SubmitButton';
import { sendEmail } from './actions';

export default function ContactForm() {
  return (
    <form action={sendEmail}>
      <input type="email" name="email" required />
      {/* SubmitButton必须在form标签内 */}
      <SubmitButton />
    </form>
  );
}

4. 升级Next.js到兼容版本 #

若使用Next.js 13.4以下版本，可能存在API支持问题，建议升级到13.4+版本：

npm install next@latest

如果以上操作后仍报错，可清理缓存重新安装依赖：

rm -rf node_modules package-lock.json
npm install

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