使用React.js和Node.js时服务端无法获取用户输入值存入数据库

嘿，我来帮你搞定这个React+Node.js的后端数据接收问题！从你给的代码片段来看，大概率是前端提交数据的姿势不对，或者后端没正确解析请求体导致的。咱们一步步来排查修复：

一、先把前端AddItem.js的代码补全修正 #

首先你的handleChange方法看起来没写完，先把它补全，确保能正确同步用户输入到组件state：

handleChange(event) {
  this.setState({ value: event.target.value });
}

然后是handleSubmit方法，要记得阻止表单默认提交行为，并且调用服务层方法时传递正确的数据：

handleSubmit(event) {
  event.preventDefault(); // 阻止浏览器默认的表单跳转行为
  // 调用ItemService的addItem方法提交数据
  this.addItemService.addItem(this.state.value)
    .then(response => {
      console.log("数据提交成功啦！", response);
      // 提交成功后可以清空输入框
      this.setState({ value: '' });
    })
    .catch(error => {
      console.error("提交失败了...", error);
    });
}

接下来是ItemService.js里的请求方法，一定要设置正确的请求头和数据格式，这是很多人踩坑的点：

class ItemService {
  addItem(itemValue) {
    return fetch('http://你的后端接口地址/api/items', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json', // 关键！告诉后端这是JSON格式的数据
      },
      body: JSON.stringify({ value: itemValue }) // 把JS对象转成JSON字符串传递
    })
    .then(response => response.json());
  }
}
export default ItemService;

二、后端Node.js的关键配置与处理 #

后端这边核心要解决的是正确解析前端传来的JSON数据，如果用Express框架的话，一定要启用express.json()中间件：

const express = require('express');
const app = express();
// 必须加这一行！否则req.body会是undefined，拿不到前端传的数据
app.use(express.json());

// 处理添加物品的POST接口
app.post('/api/items', (req, res) => {
  // 现在就能拿到前端传过来的用户输入啦
  const userInput = req.body.value;
  
  // 先做个简单的参数校验
  if (!userInput || userInput.trim() === '') {
    return res.status(400).json({ message: '请输入有效的内容哦' });
  }

  // 接下来写存入数据库的逻辑，这里举两个常见数据库的例子：
  // --- 如果你用MongoDB（Mongoose）---
  // const Item = require('./models/Item');
  // Item.create({ value: userInput })
  //   .then(newItem => res.status(201).json(newItem))
  //   .catch(err => res.status(500).json({ message: '存入数据库失败', error: err }));

  // --- 如果你用MySQL ---
  // const mysql = require('mysql');
  // const db = mysql.createConnection({ /* 你的数据库配置 */ });
  // db.query('INSERT INTO items (value) VALUES (?)', [userInput], (err, result) => {
  //   if (err) return res.status(500).json({ message: '存入失败', error: err });
  //   res.status(201).json({ id: result.insertId, value: userInput });
  // });
});

// 启动后端服务
app.listen(3001, () => console.log('后端服务跑在3001端口啦！'));

几个容易踩坑的排查点 #

• 跨域问题：如果前后端运行在不同端口，后端要配置CORS，比如安装cors包并启用：app.use(cors())
• 请求地址一致性：前端fetch的地址要和后端接口地址完全匹配，比如后端是http://localhost:3001/api/items，前端就不能写错
• 键名一致性：前端传递的JSON键名（比如value）要和后端req.body取的键名完全一致，不然也拿不到数据

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