已实现Node.js与React数据交互，创建用户页面导入出错求助

一、正确创建User组件的目录结构 #

在src目录下创建Users文件夹，再在其中新建User.jsx文件，最终目录结构如下：

src/
├── Users/
│   └── User.jsx
├── App.jsx
├── main.jsx
└── index.css

二、编写User组件代码 #

在User.jsx中实现接收并展示用户信息的逻辑：

// src/Users/User.jsx
// 可选：在Users文件夹内新建User.css，添加组件样式后导入
// import './User.css';

function User({ userInfo }) {
  // 用户信息未加载时显示占位提示
  if (!userInfo) {
    return <div>加载中...</div>;
  }

  return (
    <div style={{border: '1px solid #ddd', padding: '16px', borderRadius: '8px', maxWidth: '300px', margin: '20px 0'}}>
      <h3>用户信息</h3>
      <p><strong>姓名：</strong>{userInfo.name}</p>
      <p><strong>邮箱：</strong>{userInfo.email}</p>
    </div>
  );
}

export default User;

三、正确导入并使用User组件 #

不要直接在main.jsx中导入User组件，遵循React组件嵌套逻辑，在App.jsx中引入并使用：

// src/App.jsx
import './index.css';
import { useState, useEffect } from 'react';
import axios from 'axios';
import User from './Users/User'; // 导入User组件

function App() {
  const [array, setArray] = useState([]);
  const [userInfo, setUserInfo] = useState(null); // 新增用户信息状态

  // 获取水果数据
  const fetchFruits = async () => {
    try {
      const response = await axios.get("http://localhost:3000/api");
      setArray(response.data.fruits);
    } catch (error) {
      console.error("获取水果数据失败：", error);
    }
  };

  // 获取用户信息
  const fetchUser = async () => {
    try {
      const response = await axios.get("http://localhost:3000/api/user");
      setUserInfo(response.data);
    } catch (error) {
      console.error("获取用户信息失败：", error);
    }
  };

  useEffect(() => {
    fetchFruits();
    fetchUser(); // 调用用户信息接口
  }, []);

  return (
    <div style={{padding: '20px'}}>
      {/* 渲染用户信息组件 */}
      <User userInfo={userInfo} />
      
      {/* 渲染水果列表 */}
      <div>
        <h3>水果列表</h3>
        {array.map((fruit, index) => (
          <div key={index}>
            <p>{fruit}</p>
            <br />
          </div>
        ))}
      </div>
    </div>
  );
}

export default App;

四、后端添加用户信息接口 #

修改后端index.js，新增返回用户数据的接口（实际项目中需从登录态/数据库获取真实用户信息）：

// index.js
require('dotenv').config();
const express = require('express');
const app = express();

const cors = require("cors");
const corsOption = {
    origin: ["http://localhost:5173"]
}

app.use(express.urlencoded({ extended: true }));
app.use(express.json());
app.use(cors(corsOption));

// 水果数据接口
app.get('/api', (req, res) => {
    res.json({fruits : ["apple", "Orange", "Kiwi"]});  
});

// 用户信息接口（模拟登录用户数据）
app.get('/api/user', (req, res) => {
    res.json({
        name: "张三",
        email: "zhangsan@example.com"
    });
});

// 启动服务
app.listen(3000, () => {
    console.log("服务器运行在http://localhost:3000");
});

五、测试运行 #

1. 重启后端服务：node index.js
2. 重启前端服务：npm run dev
3. 访问http://localhost:5173，即可同时看到用户信息和水果列表

内容的提问来源于stack exchange，提问作者Marius Clément