React+Next.js订阅按钮点击无响应 求问题排查

问题排查与修复方案 #

1. 未处理Fetch请求的错误异常

当前handleOnSubmit函数里，fetch请求没有错误捕获逻辑——一旦请求失败（比如网络问题、API路由报错），代码会抛出异常但无任何提示，且setState('ready')会因异常中断执行，最终表现为点击按钮后“毫无反应”。

修复代码，用try/catch包裹异步逻辑并处理错误：

async function handleOnSubmit(e: React.SyntheticEvent<HTMLFormElement>) {
    e.preventDefault();
    setState('loading');
    try {
        const response = await fetch('/api/email', {
            method: 'POST',
        });
        if (!response.ok) {
            throw new Error(`请求失败: ${response.status}`);
        }
        console.log('订阅成功'); // 可替换为前端成功提示
    } catch (error) {
        console.error('订阅失败:', error); // 可替换为前端错误提示
    } finally {
        setState('ready');
    }
}

2. API路由未处理发送邮件的异常

当前POST函数中，resend.sendEmail可能因API token无效、邮箱配置错误等原因抛出异常，但未被捕获，会导致API路由返回500错误，而前端未处理该错误状态。

修复路由代码，添加异常捕获：

export async function POST(){
    try {
        await resend.sendEmail({
            from: 'onboarding@resend.dev',
            to: 'fake@gmail.com',
            subject: 'Newsletter',
            react: welcomeEmail()
        });

        return NextResponse.json({ status: 'ok' }, { status: 200 });
    } catch (error) {
        console.error('发送邮件失败:', error);
        return NextResponse.json({ error: '发送失败' }, { status: 500 });
    }
}

3. 表单输入未绑定状态（可选优化）

当前代码未收集用户输入的邮箱地址，若后续需要将用户邮箱作为收件人，需添加状态绑定并传递数据到API：

const [email, setEmail] = useState('');
// ...
<input
    type="email"
    id="email"
    name="email"
    value={email}
    onChange={(e) => setEmail(e.target.value)}
    placeholder="Email address"
    className="bg-gray-200 rounded px-3 py-2 focus:outline-none focus:bg-white"
    required
/>
// ...
// fetch中传递数据
const response = await fetch('/api/email', {
    method: 'POST',
    headers: {
        'Content-Type': 'application/json',
    },
    body: JSON.stringify({ email }),
});

对应路由修改：

export async function POST(request: Request){
    try {
        const { email } = await request.json();
        await resend.sendEmail({
            from: 'onboarding@resend.dev',
            to: email,
            subject: 'Newsletter',
            react: welcomeEmail()
        });

        return NextResponse.json({ status: 'ok' }, { status: 200 });
    } catch (error) {
        console.error('发送邮件失败:', error);
        return NextResponse.json({ error: '发送失败' }, { status: 500 });
    }
}

4. 确认API路由目录结构

确保路由文件位于app/api/email/route.ts（Next.js 13+ App Router模式的正确结构），若目录错误，POST请求会返回404，导致前端无响应。

内容的提问来源于stack exchange，提问作者B.Simsek