React组件渲染异常：仅显示文本，无法展示用户名功能求助

我正在使用React和Express.js结合JWT进行全栈开发。页面无法完整渲染我导入的组件，仅能渲染文本，无法执行组件内的功能，我的需求是在页面上显示用户名。

感谢您的任何帮助！

UserProvider.js #

import axios from "axios";
import UserContext from "../UserContext";
import React from "react";

import { useEffect, useState } from "react";

export const UserProvider = (props) => {

    const baseUrl = "http://localhost:3000/api/users/";
    const [ user, setUser ] = useState([]);

    useEffect(() => {
        async function fetchData() {
            await getAllUsers();
        }
        fetchData();
    }, []);

    function getAllUsers() {
        return axios.get(baseUrl).then(response => setUser(response.data))
    };



    function createUser(username, password, firstName, lastName) {       
        let user = { username, password, firstName, lastName };
        return axios.post(baseUrl, user)
            .then(response => {
                return new Promise(resolve => resolve(response.data));
            }
        );
    }

    function signInUser(username, password) {
        let user = { username, password };

        return axios.post(`${baseUrl}/login`, user)
            .then(response => {
                localStorage.setItem('myPostsToken', response.data.token)
                return new Promise(resolve => resolve(response.data));
            }
        );
    }

    return (
        <UserContext.Provider value={{
            user,
            createUser,
            signInUser
        }}>
            { props.children }
        </UserContext.Provider>
    )
}

UserList.js #

import React, { useContext, useState } from 'react';
import '../App.css'
import UserContext from '../contexts/UserContext';

function UsersList(props) {

    return (
        <UserContext.Consumer>
         {
            ({ user }) => {
                return <div>
                    <h3>Welcome back </h3>
                    <div>
                        {user.map((u) => {
                            console.log(user)
                            return (
                                <div>
                                <div>
                                    <h2>{u.name}</h2>
                                    <p>{"user's name goes here"}</p>
                                    </div>
                                </div>
                            )
                        })}
                    </div>
                </div>
            }
        }
        </UserContext.Consumer>
    );
}


export default UsersList;

UserContext.js #

import React from "react";

const UserContext = React.createContext();


export default UserContext;

App.js #

import React from 'react';
import { Route, BrowserRouter, Routes, Link } from 'react-router-dom'
import SignIn from './components/SignIn'
import SignUp from './components/SignUp'
import PostsList from './components/PostsList'
import NewPosts from './components/NewPosts'
import { PostsProvider } from './contexts/PostsProvider';
import { UserProvider } from './contexts/UserProvider';
import { EditPosts } from './components/EditPosts';
import './App.css'
import NavBar from './components/NavBar';
import UsersList from './components/UsersList'

function App() {
  return (
    <div className='app'>
        <NavBar />
    <UserProvider>
    <PostsProvider>
        <div>
            <BrowserRouter>
                <Routes>
                    <Route exact path="/" element={ <SignIn /> } />
                    <Route path="/signin" element={ <SignIn /> } />
                    <Route path="/signup" element={ <SignUp /> } />
                    <Route path="/posts/new" element={ <NewPosts /> } />
                    <Route path="/postsList" element={ <PostsList /> } />
                    <Route path="/edit/:id" element={ <EditPosts /> } />
                    <Route path="/users/" element={ <UsersList /> } />
                </Routes>
            </BrowserRouter>
        </div>
    </PostsProvider>
    </UserProvider>
    </div>
  );
}

export default App;

1. 数据字段不匹配 #

UserList.js中使用u.name渲染用户名，但从UserProvider的createUser方法及后端接口逻辑来看，用户对象的字段是username、firstName、lastName，不存在name字段，导致无法渲染内容。修改渲染逻辑：

// 显示用户名
<h2>{u.username}</h2>
// 或显示全名
<h2>{`${u.firstName} ${u.lastName}`}</h2>

2. 补全JWT验证逻辑 #

getAllUsers接口如果需要JWT验证，当前请求未携带token，会导致后端返回空数据或报错。修改getAllUsers方法：

function getAllUsers() {
    const token = localStorage.getItem('myPostsToken');
    return axios.get(baseUrl, {
        headers: { Authorization: `Bearer ${token}` }
    }).then(response => setUser(response.data))
};

3. 优化组件渲染逻辑 #

• 改用useContext钩子替代UserContext.Consumer，代码更简洁：

function UsersList(props) {
    const { user } = useContext(UserContext);

    return (
        <div>
            <h3>Welcome back </h3>
            <div>
                {user.map((u) => {
                    return (
                        <div key={u.id}> {/* 必须添加唯一key属性，避免React警告 */}
                            <div>
                                <h2>{u.username}</h2>
                                <p>{u.username}</p>
                            </div>
                        </div>
                    )
                })}
            </div>
        </div>
    );
}

• 列表渲染必须添加唯一key属性，确保组件正常重渲染。

4. 调整路由与Provider层级 #

NavBar在UserProvider外部，无法访问上下文数据，若NavBar需要用户信息，将其移至UserProvider内部：

function App() {
  return (
    <div className='app'>
    <UserProvider>
        <NavBar />
        <PostsProvider>
            <div>
                <BrowserRouter>
                    <Routes>
                        {/* 原有路由配置不变 */}
                    </Routes>
                </BrowserRouter>
            </div>
        </PostsProvider>
    </UserProvider>
    </div>
  );
}

5. 检查跨域配置 #

确保Express后端启用cors中间件，避免跨域请求失败：

// Express后端代码示例
const cors = require('cors');
app.use(cors());

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