如何在JSX中显示存储的用户数据？现有代码问题排查

核心问题排查 #

1. 函数名不匹配：你在useEffect里调用的是getUser()，但实际定义的获取用户数据的函数是getSiteUser，这直接导致组件挂载时没有触发数据获取请求，初始状态全为空值，自然无法显示存储的用户数据。
2. 无效的state操作：代码里的setUser(response.data)没有对应的const [user, setUser] = useState({})定义，属于无效操作，需移除或补充state定义。
3. 密码字段逻辑问题：接口通常不会返回用户明文密码，password状态始终为空，显示该字段没有意义，建议移除。

修复后的完整代码示例 #

import { useState, useEffect, Fragment } from 'react';
import axios from 'axios';
import { Card, Form } from 'react-bootstrap';

export function UserView() {
    const [username, setUsername] = useState('');
    const [birthday, setBirthday] = useState('');
    const [email, setEmail] = useState('');

    const [usernameErr, setUsernameErr] = useState('');
    const [passwordErr, setPasswordErr] = useState('');
    const [emailErr, setEmailErr] = useState('');

    const token = localStorage.getItem('token');

    const validate = () => {
        // 你的校验逻辑
    };

    const getSiteUser = () => {
        axios
            .get(`https://...`, {
                headers: { Authorization: `Bearer ${token}` }
            })
            .then((response) => {
                // 确保接口返回字段名与代码使用的大小写一致
                setUsername(response.data.Username);
                setEmail(response.data.Email);
                setBirthday(response.data.Birthday);
                console.log('用户数据获取成功:', response.data);
            })
            .catch(function (error) {
                console.error('获取用户数据失败:', error);
            });
    }

    useEffect(() => {
        getSiteUser(); // 修正函数名，触发数据获取
    }, [token]) // 添加token依赖，token变化时重新请求

    return (
        <Fragment>
            <h4>你的个人资料:</h4>
            <Card text='dark' className="user-form">
                <Card.Body>
                    <Card.Text>用户名: {username}</Card.Text>
                    <Card.Text>邮箱: {email}</Card.Text>
                    <Card.Text>生日: {birthday}</Card.Text>
                </Card.Body>
            </Card>

            <h4>编辑你的个人资料:</h4>
            <Form className="profile-form">
                <Form.Group className="mb-3" controlId="username">
                    <Form.Label>用户名</Form.Label>
                    <Form.Control
                        type="text"
                        onChange={(e) => setUsername(e.target.value)}
                        value={username}
                    />
                    {usernameErr && <span className="text-danger">{usernameErr}</span>}
                </Form.Group>
                <Form.Group className="mb-3" controlId="email">
                    <Form.Label>邮箱</Form.Label>
                    <Form.Control
                        type="email"
                        onChange={(e) => setEmail(e.target.value)}
                        value={email}
                    />
                    {emailErr && <span className="text-danger">{emailErr}</span>}
                </Form.Group>
                <Form.Group className="mb-3" controlId="birthday">
                    <Form.Label>生日</Form.Label>
                    <Form.Control
                        type="date"
                        onChange={(e) => setBirthday(e.target.value)}
                        value={birthday}
                    />
                </Form.Group>
                <button type="button" onClick={() => {
                    if (validate()) {
                        axios.put(`https://...`, {
                            Username: username,
                            Email: email,
                            Birthday: birthday
                        }, {
                            headers: { Authorization: `Bearer ${token}` }
                        }).then(res => {
                            console.log('资料更新成功');
                        }).catch(err => console.error('更新失败:', err))
                    }
                }}>保存修改</button>
            </Form>
        </Fragment>
    )
}

额外优化建议 #

• 字段大小写校验：确认接口返回的字段名（如Username/username）与代码使用的完全一致，大小写不匹配会导致赋值失败。
• 合并state管理：如果用户字段较多，可合并为一个user对象state，减少零散定义：

  const [user, setUser] = useState({ username: '', email: '', birthday: '' });
  // 赋值：setUser({ ...response.data });
  // 使用：user.username、user.email
  

• 加载状态处理：添加加载提示避免空内容显示：

  const [loading, setLoading] = useState(true);
  // 在getSiteUser的then/catch中设置setLoading(false)
  if (loading) return <div>加载中...</div>;
  

• 错误提示优化：数据获取失败时，给用户显示友好的页面提示，而非仅控制台打印。

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