Next.js/React项目useState失效及API响应错误修复求助

1. 修复API路由错误 (send.js) #

出现API resolved without sending a response错误的核心原因是：

• 路由处理函数未正确发送响应，res.status(200)仅设置状态码但未结束请求流程
• 邮件发送的异步操作未被等待，导致响应提前返回，邮件逻辑可能未执行完成

修改后的send.js代码：

export default async function handler(req, res) {
  if (req.method === 'POST') {
    const sgMail = require('@sendgrid/mail');
    sgMail.setApiKey(process.env.EMAIL_API_KEY);

    const msg = {
      to: req.body.email,
      from: 'sample@example.com',
      subject: 'Thanks for Contacting me',
      text: `Thanks for your contact. Please wait for reply: ${req.body.message}`,
      html: `Thanks for your contact. Please wait for reply: ${req.body.message}`,
    };

    try {
      await sgMail.send(msg);
      // 发送成功返回JSON响应
      return res.status(200).json({ success: true, message: '邮件发送成功' });
    } catch (error) {
      console.error(error);
      if (error.response) {
        console.error(error.response.body);
      }
      // 发送失败返回错误响应
      return res.status(500).json({ success: false, error: '邮件发送失败' });
    }
  }

  // 非POST请求返回405状态码
  res.status(405).json({ success: false, error: '不支持的请求方法' });
}

关键改动：

• 将处理函数改为async，并await邮件发送操作
• 使用res.status(...).json(...)明确发送JSON响应，结束请求流程
• 增加错误状态码返回，便于前端判断请求结果

2. 修复表单组件的状态更新问题 (form.js) #

原代码中console.log(result)无输出是因为API未返回响应，导致res.json()无法执行。修复API后，优化前端错误处理逻辑，确保状态更新可靠：

修改后的form.js提交函数代码：

const post = async event => {
  event.preventDefault();
  try {
    const res = await fetch('/api/send', {
      body: JSON.stringify({
        name: event.target.name.value,
        company: event.target.company.value || "",
        email: event.target.email.value,
        message: event.target.message.value,
      }),
      headers: {
        "Content-Type": "application/json"
      },
      method: "POST"
    });

    // 先检查响应状态是否正常
    if (!res.ok) {
      throw new Error(`请求失败: ${res.status}`);
    }

    const result = await res.json();
    console.log(result);
    if (result.success) { // 根据API返回的success字段判断
      setIsPosted(true);
    }
  } catch(error) {
    console.error(error);
    // 可在此添加用户可见的错误提示逻辑
  }
};

关键改动：

• 增加res.ok检查，处理HTTP错误状态（如500）
• 根据API返回的success字段判断是否更新状态，逻辑更清晰
• 统一错误捕获范围，覆盖请求阶段和响应解析阶段

验证效果 #

修复完成后：

1. API会正确处理邮件发送并返回响应，不再出现API resolved without sending a response错误
2. 前端能接收到响应并执行setIsPosted(true)，成功展示感谢提示
3. console.log(result)会正常输出API返回的结果

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