React表单通过Axios POST提交用户名存为空串问题求助

我帮你梳理下问题所在，其实是几个细节没处理好导致用户名无法正确保存到数据库：

问题根源拆解 #

1. 前端请求格式与Content-Type不匹配：你手动设置了Content-Type: application/x-www-form-urlencoded，但直接传递了JS对象{ entry: this.state.currentname }——Axios不会自动把对象转成urlencoded格式的字符串，后端自然解析不到数据。
2. 表单encType设置错误：你的表单没有上传文件，完全不需要encType="multipart/form-data"，这个属性会改变表单的编码逻辑，和你设置的请求头冲突。
3. 后端缺少请求体解析中间件：如果你的Express服务器没配置解析urlencoded或JSON数据的中间件，req.body会是空对象，根本拿不到传递的参数。

分步修复方案 #

1. 修正前端代码 #

方案一：改用JSON格式传递（更推荐，前后端都更易维护）

Axios默认支持JSON格式，不需要手动设置请求头，直接传递对象即可：

addUser (e) {
  e.preventDefault(); // 必须阻止表单默认提交行为，避免页面刷新
  const data = { entry: this.state.currentname };
  
  axios.post('/users/newuser', data)
  .then((response) => {
    console.log(response);
    // 提交成功后更新前端用户列表并清空输入框
    this.setState(prevState => ({
      users: [...prevState.users, { username: prevState.currentname }],
      currentname: ''
    }));
  })
  .catch((error) => {
    console.error(error);
  });
}

同时去掉表单的encType属性：

<form onSubmit={this.addUser}>
  <label>New username:</label>
  <input name="username" value={this.state.currentname} onChange={this.handleChange} />
  <button type="submit">Add</button>
</form>

方案二：坚持用urlencoded格式（需手动格式化数据）

如果一定要用application/x-www-form-urlencoded，需要把数据转成对应格式：

addUser (e) {
  e.preventDefault();
  const params = new URLSearchParams();
  params.append('entry', this.state.currentname);
  
  axios.post('/users/newuser', params, { 
    headers: {"Content-Type": "application/x-www-form-urlencoded"} 
  })
  .then((response) => {
    console.log(response);
    // 同样更新前端状态
    this.setState(prevState => ({
      users: [...prevState.users, { username: prevState.currentname }],
      currentname: ''
    }));
  })
  .catch((error) => {
    console.error(error);
  });
}

2. 配置后端中间件（关键步骤！） #

在你的server.js中，必须添加解析请求体的中间件，否则req.body会是空的：

const express = require('express');
const app = express();

// 解析JSON格式的请求体（对应方案一）
app.use(express.json());
// 解析urlencoded格式的请求体（对应方案二）
app.use(express.urlencoded({ extended: true }));

// 挂载路由
const usersRouter = require('./routes/users');
app.use('/users', usersRouter);

3. 确认前端handleChange函数正常工作 #

确保你的输入框 onChange 事件能正确更新currentname状态：

handleChange = (e) => {
  this.setState({ currentname: e.target.value });
}

如果这个函数有问题，this.state.currentname本身就是空的，传递给后端的自然也是空字符串。

内容的提问来源于stack exchange，提问作者A.S.J