React中通过onClick事件传递price数据至MongoDB异常：仅存储Date与Id的问题求助

看起来你的后端已经能正常处理请求（Postman测试通过），问题出在React前端发送数据的格式上。目前你直接把props.price作为请求体发送，但后端大概率期望接收一个包含price字段的对象，而不是单纯的数值，这就导致数据库里只生成了默认的_id和Date字段，没有存储你要的price数据。

下面是具体的修复方案：

步骤1：调整请求体格式，将price包装为对象 #

修改你的handlePayment函数，把要发送的price放到一个对象里，确保后端能识别对应的字段：

import axios from "axios";
const Package = (props) => {
  // 改用async/await处理异步请求，同时包装数据为对象
  const handlePayment = async (price) => {
    try {
      // 把price包装成后端期望的对象结构（这里假设后端接收{ price: xxx }）
      const requestData = { price: price };
      const result = await axios.post("http://localhost:3000/pay", requestData);
      console.log("数据提交成功：", result.data);
    } catch (error) {
      console.error("提交失败：", error);
    }
  };

  return (
    <>
      <div className="col-lg-4 col-md-6 col-sm-10 pb-4 d-block m-auto">
        <div className="pricing-item">
          <div className="pt-4 pb-3">
            <h4>{props.name}</h4>
          </div>
          <div className="pricing-price pb-1 text-primary color-primary-text ">
            <h1>
              <span>{props.price}</span>
            </h1>
          </div>
          <div className="pricing-description">
            <ul className="list-unstyled mt-3 mb-4"></ul>
          </div>
          <div className="pricing-button pb-4">
            <button 
              onClick={() => handlePayment(props.price)} 
              type="button" 
              className="btn btn-lg btn-primary w-75"
            >
              Buy
            </button>
          </div>
        </div>
      </div>
    </>
  );
};

关键修改点说明： #

• 包装请求体：将单纯的price数值放到{ price: price }对象中，这样后端就能正确解析到price字段并存储到MongoDB。
• 异步请求处理：使用async/await（或者.then()）处理axios的异步请求，避免控制台打印的是未完成的Promise对象，同时能更好地处理成功/失败的情况。
• 错误捕获：添加try/catch块，方便排查请求失败的原因（比如跨域、后端报错等）。

额外验证建议 #

如果不确定后端期望的请求体格式，可以对照Postman里成功的请求：

打开Postman的成功请求，查看Body部分的结构，确保React发送的请求体和它完全一致。比如Postman里如果是{"price": 99}，那React也要发送相同结构的对象。

这样修改后，你的price数据应该就能正确存储到MongoDB里了。

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