如何从Node向React传递数据？含连接拒绝问题求助

看起来你碰到了两个核心问题：React连不上Node服务的ERR_CONNECTION_REFUSED错误，以及不知道怎么把Node里的rows数据正确存入React状态。我来一步步帮你搞定：

1. 先解决连接拒绝（ERR_CONNECTION_REFUSED）问题 #

这个错误大概率是两个原因之一，先逐一排查：

• 确认Node服务真的在3000端口运行：打开浏览器直接访问http://localhost:3000/new，如果打不开，说明Node服务没启动，或者你代码里的端口配置写错了（检查Node入口文件里的app.listen(3000)有没有设置正确）。
• 检查Node路由是否正确挂载：确保你的router.get("/new")已经被Express实例使用，比如主文件里有app.use(router)或者app.use('/api', router)（如果带了前缀，那React的fetch地址要改成http://localhost:3000/api/new）。

2. 修正Node端的数据返回逻辑 #

你现在用res.render('new', {parents: rows})是给模板引擎返回渲染后的HTML页面，但React需要的是JSON格式的数据，得改成返回JSON：

router.get("/new", (req, res) => {
  sql.fetchAllParents(function(err, rows) {
    // 先临时设置跨域头，后面推荐用cors中间件统一处理
    res.setHeader("Access-Control-Allow-Origin", "http://localhost:3001");
    if (err) {
      console.error(err);
      return res.status(500).json({ error: '获取家长数据失败' });
    }
    // 返回JSON格式的数据，而非渲染模板
    res.json({ parents: rows });
  });
});

另外，单独在每个路由设置跨域头太麻烦，推荐安装cors中间件全局处理：

npm install cors

然后在Node入口文件里启用：

const cors = require('cors');
const app = express();

// 允许React的3001端口访问
app.use(cors({ origin: 'http://localhost:3001' }));

3. React端获取数据并存入State #

现在Node返回JSON了，React这边可以正常解析，然后把数据存入组件状态：

// 类组件的写法：先初始化状态
constructor(props) {
  super(props);
  this.state = {
    parents: []
  };
}

componentDidMount() {
  fetch(`http://localhost:3000/new`)
    .then(response => {
      // 先检查响应是否成功
      if (!response.ok) {
        throw new Error(`请求失败！状态码: ${response.status}`);
      }
      return response.json();
    })
    .then(data => {
      // 把获取到的数据存入state
      this.setState({ parents: data.parents });
      console.log('获取到的家长数据:', data.parents);
    })
    .catch(err => {
      console.log("读取数据出错: ", err);
    });
}

如果是函数组件，用useEffect替代componentDidMount：

import { useState, useEffect } from 'react';

function YourComponent() {
  const [parents, setParents] = useState([]);

  useEffect(() => {
    fetch(`http://localhost:3000/new`)
      .then(response => {
        if (!response.ok) throw new Error('请求失败');
        return response.json();
      })
      .then(data => setParents(data.parents))
      .catch(err => console.error('出错:', err));
  }, []);

  // 后续就可以用parents状态渲染UI了
  return <div>{/* 你的渲染逻辑 */}</div>;
}

最后验证步骤 #

1. 重启Node服务，确保它在3000端口正常运行
2. 启动React服务（3001端口），打开浏览器控制台查看是否还有连接错误
3. 检查控制台日志，确认数据已经成功获取并存入state

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