React传值到state并提交数据至MongoDB时取值undefined报错排查

• 前端state初始化缺失字段：构造函数里只定义了brand属性，没有声明和textarea绑定的val字段，初始访问this.state.val就是undefined。
• 受控组件未绑定值更新事件：React的受控表单元素（当前textarea绑定了value到state）必须搭配onChange事件，把用户输入的内容实时同步到state，否则用户输入的内容不会更新到this.state.val，值永远是初始的undefined。
• 日志打印方式错误：用+拼接字符串和JS对象时，对象会被隐式转换为[object Object]字符串，看不到对象实际内容，不是databody本身结构错了。
• 后端缺少请求体解析中间件：Express框架默认不会解析JSON格式的请求体，如果没有提前配置express.json()中间件，req.body的值为undefined，直接写入MongoDB会触发类型错误，这也是运行报错的核心原因。
• 组件DOM结构错误：render函数里嵌套了<body>标签，React应用本身挂载在页面的body节点下，组件内不能重复写body标签，会导致DOM渲染异常。
• 响应格式不匹配：后端之前返回的是拼接的字符串"saved to db: " + data，前端用res.json()解析非JSON格式的响应会抛出解析错误。

前端ping.js修正代码 #

constructor(props) {
  super(props);
  // 补全val字段初始值
  this.state = { 
    brand: "Ford",
    val: "" 
  };
}

// 新增输入框值同步方法
handleInputChange = (e) => {
  this.setState({ val: e.target.value });
}

handleSubmit = () => {
  console.log("submit running");
  const databody = {
    message: this.state.val,
  };
  // 打印对象时用逗号分隔参数，不要用+拼接
  console.log("提交数据：", databody);
  return fetch("http://localhost:5000/stored", {
    method: "POST",
    body: JSON.stringify(databody),
    headers: {
      "Content-Type": "application/json",
    },
  })
  .then((res) => {
    // 加状态码判断，避免解析错误响应
    if (!res.ok) throw new Error("请求失败");
    return res.json();
  })
  .then((data) => console.log("服务端响应：", data))
  .catch(err => console.error("请求异常：", err));
};

render() {
  return (
    <div className="ok2">
      <textarea
        className="message"
        placeholder="Write me somthing!. Also, double click to ping:) "
        value={this.state.val}
        onChange={this.handleInputChange}
      ></textarea>
      <button
        className="button"
        onClick={() => {
          this.magic();
          this.handleSubmit();
        }}
      >
        提交
      </button>
    </div>
  )
}

后端index.js修正代码 #

const express = require('express');
const app = express();
// ！！！必须在路由定义前加这行，解析JSON请求体
app.use(express.json());
// 如果有跨域报错，安装cors依赖后加下面两行
// const cors = require('cors');
// app.use(cors());

app.post("/stored", (req, res) => {
  console.log("收到请求数据：", req.body);
  db.collection("quotes").insertOne(req.body, (err, result) => {
    if (err) {
      console.error("数据库写入失败：", err);
      return res.status(500).json({ code: 500, msg: "写入失败" });
    }
    // 返回标准JSON格式响应
    res.json({ code: 200, msg: "保存成功", data: result });
  });
});

• 修改代码后重启前后端服务，否则改动不会生效
• 输入内容提交时，前端控制台能看到message字段为输入的实际内容，不再是undefined
• 后端控制台能正常打印出请求体的JSON结构，MongoDB插入数据无报错
• 如果出现跨域错误，按照代码注释里的说明安装配置cors中间件即可

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