如何从Node.js服务向React组件获取数据？现有代码问题求解

让我帮你一步步搞定这个数据传递的问题，你的代码里有几个关键细节没处理好，咱们逐个修正：

1. 请求方法不匹配 + 未返回JSON格式数据 #

你的Node.js服务只监听了POST请求，但React里用fetch默认发送的是GET请求，而且服务返回的是纯字符串，不是React期望的JSON格式，这会直接导致response.json()报错。

修改后的Node.js代码：

var express = require('express');
var cors = require('cors'); // 解决跨域问题，先安装这个包
var app = express();

app.use(cors()); // 允许跨域请求
app.use(express.json()); // 解析JSON请求体（后续存数据会用到）

// 获取数据推荐用GET请求
app.get('/', function (req, res) {
  // 返回JSON格式的数据，替代原有的纯字符串
  res.json({ 
    message: 'Hello from Node.js server!',
    data: ['item1', 'item2', 'item3'] // 模拟未来从数据库获取的数据
  });
});

app.listen(4000, function () {
  console.log('Server running on port 4000!');
});

注意：先在Node项目目录执行npm install cors安装跨域依赖包。

2. React组件的状态管理与useEffect写法错误 #

你现在的React组件没有用useState存储数据，而且useEffect直接用async作为回调不符合规范（会导致清理函数异常），同时也没处理请求失败的情况。

修改后的React Home页面代码：

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

const Home = () => {
  // 定义状态存储服务端数据和请求错误
  const [data, setData] = useState(null);
  const [error, setError] = useState(null);

  useEffect(() => {
    // 在useEffect内部定义async函数，避免直接用async作为回调
    const fetchData = async () => {
      try {
        const url = 'http://localhost:4000/';
        const response = await fetch(url);
        // 先检查请求是否成功
        if (!response.ok) {
          throw new Error(`HTTP error! Status: ${response.status}`);
        }
        const result = await response.json();
        setData(result); // 更新状态渲染数据
      } catch (err) {
        setError(err.message); // 捕获错误并展示
      }
    };

    fetchData();
  }, []); // 空数组作为依赖，确保组件挂载时仅请求一次

  return (
    <div>
      <h1>Home Page</h1>
      {error && <p style={{color: 'red'}}>Error: {error}</p>}
      {data ? (
        <div>
          <p>Message from server: {data.message}</p>
          <ul>
            {data.data.map((item, index) => (
              <li key={index}>{item}</li>
            ))}
          </ul>
        </div>
      ) : (
        <p>Loading data...</p>
      )}
    </div>
  );
};

export default Home;

3. 后续连接NoSQL数据库的扩展思路 #

等基础请求通了之后，你可以在Node.js里集成MongoDB这类NoSQL数据库：

• 安装MongoDB驱动：npm install mongodb
• 在Node服务里连接数据库，替换模拟数据，比如从集合中查询数据后返回给React：

// 示例MongoDB查询逻辑（需先完成数据库连接配置）
app.get('/', async function (req, res) {
  try {
    // 假设已连接数据库并拿到集合实例
    const items = await db.collection('items').find().toArray();
    res.json({
      message: 'Data from MongoDB',
      data: items
    });
  } catch (err) {
    res.status(500).json({ error: err.message });
  }
});

现在按照上面的步骤修改代码，先启动Node服务，再启动React应用，应该就能正常拿到数据了！

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