React中Axios POST请求无法提交useState数据问题求助

可能原因及解决方案 #

1. 确保服务器端正确解析JSON请求体 #

服务器端必须配置express.json()中间件，才能读取Axios发送的JSON格式请求体，否则无法获取bookData中的字段值。在Express服务器入口文件中添加：

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

// 关键：添加JSON解析中间件
app.use(express.json());

// 你的书籍路由示例
app.post('/api/books', (req, res) => {
  // 现在可通过req.body获取客户端提交的bookData
  console.log(req.body);
  // ...后续业务逻辑
});

2. 修正price字段的类型转换 #

React中input type="number"的value返回的是字符串类型，但你的bookData中price初始值为数字类型的null。若服务器模型要求price为数字，直接传递字符串会导致解析失败，最终存为null。修改dataEntry函数：

const dataEntry = (event) => {
  const { name, value } = event.target;
  // 对price字段单独做类型转换
  const updatedValue = name === 'price' ? Number(value) : value;
  setBook(previous => ({ ...previous, [name]: updatedValue }));
};

3. 验证请求URL与服务器路由匹配 #

客户端package.json中proxy设置为http://localhost:5000/api/，因此axios.post('/books')实际请求地址是http://localhost:5000/api/books。确认服务器端的路由是否为/api/books，而非/books。

4. 调试bookData的实际提交值 #

在eventClick函数中添加日志，确认提交时bookData的所有字段是否有正确值：

const eventClick = async (event) => {
  event.preventDefault();
  // 打印bookData，排查字段是否为空
  console.log('提交的数据:', bookData);
  try {
    const result = await axios.post('/books', bookData);
    console.log(result);
  } catch (error) {
    setError(error.response.data);
  }
};

如果日志显示某些字段为空，检查对应input的name属性是否和bookData的字段名完全一致（大小写敏感）。

5. 确认服务器模型字段与客户端一致 #

检查Sequelize模型中定义的字段名（如title、author等）是否和客户端bookData的字段名完全匹配，拼写、大小写都不能出错。比如模型中是book_title而客户端是title，会导致字段无法映射，最终存为null。

内容的提问来源于stack exchange，提问作者KE Press