Next.js 13中表单无法触发onsubmit调用handleSubmit方法求助

你的代码存在核心错误，导致handleSubmit无法正常执行：未初始化title状态变量及对应的setTitle方法。虽然导入了useState，但未在组件内声明该状态，会触发React运行时错误，直接阻断表单提交逻辑。

修复步骤 #

1. 补全状态初始化 #

在组件内部添加useState初始化代码：

const [title, setTitle] = useState('');

2. 修复后的完整代码 #

"use client"

import { useRouter } from "next/navigation"
import { useState } from "react"

export default function CreateForm() {
    // 初始化title状态变量
    const [title, setTitle] = useState('');
    
    const handleSubmit = async (e) => {
        e.preventDefault();
        const newItem = { title }

        try {
            const res = await fetch('http://localhost:4000/tickets', {
                method: "POST",
                headers: { "Content-Type": "application/json" },
                body: JSON.stringify(newItem)
            })
            // 新增响应状态处理
            if (res.ok) {
                console.log('提交成功');
                setTitle(''); // 重置输入框
                // router.push('/success'); // 可选：跳转成功页
            } else {
                console.error('提交失败:', await res.text());
            }
        } catch (err) {
            console.error('请求出错:', err);
        }
        console.log('submit')
    }

    return (
        <form onSubmit={handleSubmit} className="w-1/2">
            <label>
                <span>Title:</span>
                <input
                    required
                    type="text"
                    name="title"
                    onChange={(e) => setTitle(e.target.value)}
                    value={title}
                />
            </label>
            <button type="submit">
                sendit
            </button>
        </form>
    )
}

额外排查建议 #

• 打开浏览器控制台，查看是否有未捕获的错误（这是定位此类问题最直接的方式）。
• 确认外部APIhttp://localhost:4000/tickets正常运行，且已配置CORS允许跨域请求（若API与Next.js应用端口不同）。
• 测试时可在handleSubmit开头添加简单console.log，快速验证方法是否被触发。

内容的提问来源于stack exchange，提问作者S.Yavuz