Next.js中表单组件数据无法传递至API端点问题求助

为什么你的方法行不通？ #

• 客户端与服务端完全隔离：FormComponent在浏览器（客户端）运行，API端点在Node.js（服务端）运行，两者是独立进程，模块导出的变量根本没法跨环境共享。你在客户端修改的formData只是浏览器里的副本，服务端导入的是另一个初始值的副本，自然拿不到客户端更新后的数据。
• 服务端模块有缓存机制：Next.js的API端点首次导入后会被缓存，就算客户端改了组件里的变量，服务端的formData也不会跟着更新。

正确实现方式 #

表单提交时，通过HTTP请求把数据发送到API端点——这才是前后端传递数据的标准方式，别再依赖模块导出共享数据了。

修改FormComponent的提交逻辑 #

import { useState } from 'react';

const FormComponent = () => {
  const [localFormData, setLocalFormData] = useState({
    name: '',
    email: '',
    message: '',
  });

  const handleChange = (e) => {
    setLocalFormData((prevState) => ({
      ...prevState,
      [e.target.name]: e.target.value,
    }));
  };

  const handleSubmit = async (e) => {
    e.preventDefault();
    try {
      // 发送POST请求到你的API端点
      const res = await fetch('/api/your-endpoint', {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json',
        },
        body: JSON.stringify(localFormData),
      });
      if (res.ok) {
        console.log('数据提交成功');
        // 可选：提交后重置表单
        setLocalFormData({ name: '', email: '', message: '' });
      } else {
        console.error('提交失败');
      }
    } catch (err) {
      console.error('请求出错:', err);
    }
  };

  return (
    <form onSubmit={handleSubmit}>
      <label>
        Name:
        <input
          type="text"
          name="name"
          value={localFormData.name}
          onChange={handleChange}
        />
      </label>
      <br />
      <label>
        Email:
        <input
          type="email"
          name="email"
          value={localFormData.email}
          onChange={handleChange}
        />
      </label>
      <br />
      <label>
        Message:
        <textarea
          name="message"
          value={localFormData.message}
          onChange={handleChange}
        />
      </label>
      <br />
      <button type="submit">Submit</button>
    </form>
  );
};

export default FormComponent;

修改API端点代码 #

export default async function handler(req, res) {
  // 只处理POST请求
  if (req.method === 'POST') {
    try {
      // 从请求体里拿到表单数据
      const formData = req.body;
      console.log('收到的表单数据:', formData);
      // 这里写你的业务逻辑，比如用formData.email做处理
      const results = formData.email;
      res.status(200).json({ success: true, data: results });
    } catch (err) {
      res.status(500).json({ success: false, error: err.message });
    }
  } else {
    res.status(405).json({ success: false, message: '仅支持POST请求' });
  }
}

额外提醒 #

• 不用再导出组件里的formData变量了，HTTP请求才是前后端传数据的正确姿势。
• API端点里一定要判断请求方法，避免非POST请求导致的错误。

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