如何使用React创建表单POST请求？如何查看指定格式的FormData

嘿，作为React新手碰到这个问题太正常啦！我来帮你从前端调试和服务器端接收两个方面说清楚在哪里能看到你要的{"email": "test@gmail.com"}格式数据～

一、在前端浏览器里查看（调试用） #

你可以直接在浏览器工具里看提交的FormData，或者在代码里主动打印出来：

1. 通过开发者工具查看请求Payload #

• 打开浏览器开发者工具（按F12或右键选「检查」）
• 切换到「Network」标签页
• 点击表单的「Send data!」按钮提交请求
• 在Network列表里找到/api/form-submit-url这个POST请求并点击它
• 查看「Payload」或「Form Data」部分，这里会列出所有表单字段和对应的值，你能直接看到email字段的内容

2. 在React代码里直接打印目标格式 #

原生FormData对象直接console.log看不到内部内容，你可以在handleSubmit里加几行代码提取email并打印成你要的格式：

handleSubmit(event) {
  event.preventDefault();
  const data = new FormData(event.target);
  // 提取email字段并组装成目标格式
  const emailValue = data.get('email');
  console.log({ email: emailValue }); // 控制台会输出 {"email": "test@gmail.com"} 这样的结构
  
  fetch('/api/form-submit-url', {
    method: 'POST',
    body: data,
  });
}

刷新页面提交表单后，打开浏览器控制台（Console标签）就能看到这个数据啦。

二、在服务器端查看（真正接收数据的地方） #

如果搭了服务器，以Node.js + Express为例，需要先处理multipart/form-data类型的请求（FormData默认用这个类型），然后就能在服务器控制台看到数据：

1. 简单的服务器示例代码 #

先安装依赖：

npm install express multer

创建服务器文件（比如server.js）：

const express = require('express');
const multer = require('multer');
const app = express();
const upload = multer(); // 用来解析multipart/form-data格式的请求

// 处理表单提交的接口
app.post('/api/form-submit-url', upload.none(), (req, res) => {
  // req.body是包含所有表单字段的对象
  console.log('收到的完整FormData数据：', req.body);
  // 单独提取email字段打印成你要的格式
  console.log('仅email字段：', { email: req.body.email });
  res.send('表单数据已接收');
});

// 启动服务器
app.listen(3000, () => {
  console.log('服务器运行在 http://localhost:3000');
});

2. 运行服务器并查看 #

• 启动服务器：node server.js
• 运行你的React应用并提交表单
• 服务器的控制台就会打印出包含email的目标格式数据啦

这样不管是前端调试还是服务器接收，你都能轻松看到想要的内容～

内容的提问来源于stack exchange，提问作者Alina Homyakova