我正在构建一个React应用程序，其中有一个ViewUser组件，负责显示使用Axios从API获取的用户详细信息。然而，我面临着一个问题，用户详细信息没有像预期的那样显示在组件中。我已经尝试了各种故障排除步骤，包括使用空字符串初始化状态，但问题仍然存在。
[[ enter image description here ]（https://i.stack.imgur.com/lwppT.png）]（https://i.stack.imgur.com/s4dKV.png）
有人能帮我一下吗？
已经确认API端点返回了预期的数据，并且从URL中正确提取了id参数。但是，用户详细信息不会显示在组件中。

import axios from 'axios';
import React, { useState, useEffect } from 'react'
import { Link, useParams } from 'react-router-dom'

export default function ViewUser() {

    const [user, setUser] = useState({
        name: "",
        username: "",
        email: ""
    });
    
    

    const { id } = useParams();
    

    useEffect(() => {
        loadUser();
    }, []);

    const loadUser = async () => {
        try {
            const result = await axios.get(`http://localhost:8080/user/${id}`);
            console.log(result.data); // Log the fetched user data
            setUser(result.data);
        } catch (error) {
            console.error("Error loading user:", error);
        }
    };
    

    

    return (
        <div className='container'>
            <div className='row'>
                <div className='col-md-6 offset-md-3 border rounded p-4 mt-2 shadow'>
                    <h2 className='text-center m-4'> User Details</h2>
                    <div className='card'>
                        <div className='card-header'>
                            Details of User id : {user.id}
                            <ul className='list-group list-group-flush'>
                                <li className='list-group-item'>
                                    <b>Name:</b>
                                    {user.name}
                                </li>
                                <li className='list-group-item'>
                                    <b>Username:</b>
                                    {user.username}
                                </li>
                                <li className='list-group-item'>
                                    <b>Email:</b>
                                    {user.email}
                                </li>
                            </ul>
                        </div>

                    </div>
                    <Link className="btn btn-primary my-2" to="/">Back to Home</Link>
                </div>
            </div>
        </div>
    )
}

有人可以帮助我确定可能导致此问题的原因或建议其他故障排除步骤来解决它吗？任何见解或指导将不胜感激。