React使用Axios传数据到MongoDB失败且报连接拒绝错误求助

问题排查与解决方案 #

1. 连接被拒绝直接原因：前后端端口不匹配 #

你的服务端启动代码中监听的端口是30001，但前端Axios请求的端口是3001，端口不一致导致连接被拒绝。

• 解决方案：统一端口即可，比如把前端请求地址改为http://localhost:30001/create，或者把服务端监听端口改为3001。

2. 取值错误：React状态更新异步导致拿不到最新选中数据 #

你在handleSelectedRow函数中调用setSelected(row)后立即通过selected取值，但React的状态更新是异步的，此时selected还未更新为最新选中的行数据，会导致提交的字段为空。

• 解决方案：直接使用回调参数中拿到的row组装提交数据，无需走selected状态：

const newStock = {
  name: row.name,
  symbol: row.symbol,
  market_cap: row.market_cap,
  price: row.price
}

3. 字段不匹配：数据模型和提交字段对应不上 #

你的Stock数据模型中定义的价格字段为current_price，但你在路由中接收并提交的字段是price，会导致价格字段入库为空。

• 解决方案：统一字段命名，比如把路由中的price改为current_price，或者把数据模型里的current_price改为price。

4. 数据库连接异常：MongoDB连接配置缺失 #

你当前的MongoDB连接字符串没有填写数据库密码，也没有加必要的连接配置参数，大概率无法正常连接MongoDB Atlas，同时需要确认你MongoDB Atlas的IP白名单已经添加了本地IP，或者临时开启允许所有IP访问用于测试。

• 解决方案：补全连接配置：

mongoose.connect("mongodb+srv://admin:你的数据库密码@cluster0.mongodb.net/stockDB?retryWrites=true&w=majority", {
  useNewUrlParser: true,
  useUnifiedTopology: true
})
.then(()=>console.log("数据库连接成功"))
.catch(err=>console.log("数据库连接失败", err))

5. 路由无响应：异步存储未处理也没有返回值 #

你当前的路由中newStock.save()是异步操作，没有处理成功/失败逻辑，也没有给前端返回响应，会导致请求超时。

• 解决方案：修改路由代码：

router.route("/create").post(async (req,res) =>{
  try {
    const name = req.body.name;
    const symbol = req.body.symbol;
    const market_cap = req.body.market_cap;
    const current_price = req.body.price; // 字段和模型对应
    const newStock = new Stock({
        name, 
        symbol, 
        market_cap, 
        current_price
    });
    await newStock.save();
    res.status(200).json({msg:"存储成功"})
  } catch (err) {
    res.status(400).json({msg:"存储失败", error: err})
  }
})

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