React页面刷新后User状态仅Name保留，其余字段丢失问题排查

核心问题 #

页面刷新后，useEffect中设置user状态时仅name字段留存，其他字段丢失，主要由以下几个问题导致：

1. 字段赋值笔误 #

在useEffect的setUser中，profile_image被错误赋值为data.posts，导致头像字段无法获取正确值：

// 错误写法
profile_image: data.posts
// 正确写法
profile_image: data.profile_image

2. 异步更新的闭包陷阱 #

在fetch的异步回调中直接使用...user展开状态，会因闭包捕获到组件挂载时的初始user（仅含name: ""），虽然刷新后初始状态确实如此，但使用函数式更新能更稳妥地基于最新状态修改：

// 推荐写法：函数式更新获取最新状态
setUser(prevUser => ({
    ...prevUser,
    id: data.id,
    name: data.name,
    bio: data.bio,
    posts: data.posts,
    profile_image: data.profile_image
}))

3. 接口返回结构验证 #

登录/注册接口的用户信息嵌套在data.user下，但/me接口直接返回用户对象（data.id、data.name等），需通过console.log(data)确认/me接口返回的data中是否包含bio、profile_image等字段，确保后端返回数据结构正确。

4. 冗余的状态合并 #

页面刷新后，初始user状态仅含name: ""，此时无需展开旧状态，直接替换为完整的用户对象即可：

setUser({
    id: data.id,
    name: data.name,
    bio: data.bio,
    posts: data.posts,
    profile_image: data.profile_image
})

修正后的完整useEffect代码 #

useEffect(() => {
    const token = sessionStorage.getItem('jwt')
    if(token) {
        fetch('http://10.129.2.23:8080/me', {
            headers: {
                token: token,
                'Content-Type': 'application/json'
            },
        })
        .then(res => res.json())
        .then(data => {
            console.log(data)
            setUser({
                id: data.id,
                name: data.name,
                bio: data.bio,
                posts: data.posts,
                profile_image: data.profile_image
            })
        })
        .catch(err => {
            console.error('获取用户信息失败:', err)
            sessionStorage.removeItem('jwt')
        })
    }
}, [])

额外优化建议 #

登录和注册时的状态更新也建议使用函数式更新，避免闭包导致的旧状态问题：

// 注册时的setUser
setUser(prevUser => ({
    ...prevUser,
    id: data.user.id,
    name: data.user.name,
    bio: data.user.bio,
    profile_image: data.user.profile_image
}))

// 登录时同理
setUser(prevUser => ({
    ...prevUser,
    id: data.user.id,
    name: data.user.name,
    bio: data.user.bio,
    profile_image: data.user.profile_image
}))

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