Node服务端数组无法在React应用中获取的问题求助

第一步：修复Node服务端的响应代码 #

你现在的Node路由只注释掉了默认的res.send，但没返回正确的数组数据。得把数组以JSON格式返回，这样React才能正常解析。修改后的路由代码如下：

var express = require('express');
var router = express.Router();
var arr = [{ id: 1, username: "samsepi0l" }, { id: 2, username: "D0loresH4ze" }];

/* GET users listing. */
router.get('/', function(req, res, next) {
  // 直接返回JSON格式的数组
  res.json(arr);
});

module.exports = router;

现在访问localhost:3000/users，就能看到清晰的JSON数组了——这是React能拿到数据的基础前提。

第二步：React端发起请求并渲染列表 #

接下来在React组件里，用钩子函数处理数据请求和渲染逻辑就行，示例代码如下：

import { useState, useEffect } from 'react';

function UserList() {
  const [users, setUsers] = useState([]);
  const [error, setError] = useState(null);

  useEffect(() => {
    // 发起GET请求到/users接口
    fetch('/users')
      .then(response => {
        // 先检查响应是否成功
        if (!response.ok) {
          throw new Error('请求失败，请检查服务端是否正常运行');
        }
        return response.json();
      })
      .then(data => {
        setUsers(data);
      })
      .catch(err => {
        setError(err.message);
      });
  }, []);

  return (
    <div>
      <h2>用户列表</h2>
      {error && <p style={{color: 'red'}}>{error}</p>}
      <ul>
        {users.map(user => (
          <li key={user.id}>{user.username}</li>
        ))}
      </ul>
    </div>
  );
}

export default UserList;

几个关键注意点 #

• 端口冲突问题：如果React开发服务器（默认3000）和Node服务端都用3000端口，会直接导致端口占用。解决办法二选一：
  • 把Node服务端改成其他端口（比如3001），然后在React的package.json里加一行"proxy": "http://localhost:3001"，这样React请求/users会自动转发到Node的3001端口。
  • 等React项目build完成后，让Node服务端直接托管React的静态文件，这样就能在同一个端口访问前后端内容。
• 跨域问题：如果前后端不在同一个端口/域名下，需要在Node端配置CORS：先安装cors包（npm install cors），然后在Express里引入并启用：

  var cors = require('cors');
  app.use(cors());
  

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