使用Express从MongoDB拉取数据无法发送到React前端问题求助

核心错误原因 #

• 后端接口逻辑完全错误：后端需要编写接口接收前端请求、查询数据后返回给前端，而非在服务端用axios主动发起请求。你当前fetchData.js中写的axios.post('/data', data)没有指定服务端口，默认走80端口发起请求，但你的服务运行在8000端口，且80端口没有部署任何服务，所以直接报ECONNREFUSED 127.0.0.1:80的连接拒绝错误。
• 你没有在fetchData的路由实例上注册/data的请求处理逻辑，前端请求/fetchdata/data没有对应响应，必然报错。
• fetchData.js里重复实例化express应用、重复配置cors和json解析属于冗余代码，根server.js已经做了全局配置，不需要重复编写。

修复代码 #

1. 重写fetchData.js #

替换原有全部内容为以下代码：

const express = require('express');
const router = express.Router();
const hospitalData = require('../modals/modal')

// 注册POST接口，对应完整请求路径为/fetchdata/data
router.post('/data', async (req, res) => {
  try {
    // 收到前端请求后查询MongoDB数据
    const data = await hospitalData.find({});
    console.log("查询到的数据：", data);
    // 将数据返回给前端
    res.send(data);
  } catch (err) {
    console.log('数据查询失败：', err);
    res.status(500).send({msg: '数据查询失败', error: err})
  }
})

module.exports = router;

2. 优化前端home.js请求逻辑 #

给axios请求添加错误捕获，避免未处理的Promise报错，同时修改渲染逻辑（React无法直接渲染对象，需要取对应字段）：

import React, { useEffect, useState } from 'react';
import axios from 'axios';

function Home() {
  
  const [hospitals, setHospitals] = useState([]);
  const getHospitalsData = () => {
    axios.post('http://localhost:8000/fetchdata/data')
      .then((response) => {
        const data = response.data;
        setHospitals(data);
    })
    .catch(err => {
      console.log('请求数据失败：', err)
    })
  }

  useEffect(() => getHospitalsData, []);

    return (
      <div className="App">
        <h2 className="text-center">Welcome to Nivaran</h2>
        
        {/* 替换name字段为你MongoDB存储的医院对应字段名 */}
        {hospitals.map((hospital, index) => {
          return <p key={index}>{ hospital.name }</p>
        })}

      </div>
    );
  }

export default Home;

额外注意 #

• 启动服务前确保MongoDB Atlas的连接正常，数据库集合里有对应数据。
• 前端渲染列表必须加key属性，否则会触发React警告。

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