Next.js中onSubmit未触发getCertificate函数问题求助

架构老林

2026-7-4

问题排查与修复方案

核心问题1：异步函数未执行

你的onSubmit回调里只是定义了一个匿名异步函数，但没有调用它。代码中async() => { ... }这部分仅创建了函数实例，并未执行，所以getCertificate完全没被触发，反而直接执行了后面的console.log("getCertificate completed")。

核心问题2：表单默认提交行为导致页面跳转

表单默认会触发页面刷新/跳转（就是你看到的Navigated to http://localhost:3000/?certId=my_cert_id），即使修复了函数调用，异步请求也会因为页面刷新被中断，同时跳转还会清空控制台日志。

修复后的完整代码

修正onSubmit回调

<form onSubmit={async (e) => {
  // 阻止表单默认提交行为，避免页面跳转
  e.preventDefault();
  try {
    const resp = await getCertificate(id);
    const data = await resp.json();
    console.log(data);
  } catch (err) {
    console.error(err);
  }
  console.log("getCertificate completed");
}}>

修正getCertificate函数

注意：Response.json()只能调用一次（它会消耗响应体），原代码里先打印await resp.json()，之后再返回resp调用json()会报错，需要调整：

async function getCertificate(id: string): Promise<Response> {
  console.log("in getCertificate");
  const resp = await fetch(`${serverUri}/certs/${id}`);
  // 先存储响应数据，避免重复调用json()导致报错
  const data = await resp.json();
  console.log(`Response data:`, data);
  // 若需返回响应，需重新构建Response（原响应体已被消耗）
  return new Response(JSON.stringify(data), {
    status: resp.status,
    headers: resp.headers
  });
  // 若不需要返回Response，直接返回data更合理：
  // return data;
}