template-10560/头像昵称同步问题修复说明.md

头像昵称同步问题修复说明

问题描述

用户更新了头像和昵称后，首页仍然提示"您还没有上传头像和昵称"，导致用户体验不佳。

问题分析

根本原因

1. 检查逻辑错误：Header.tsx 中检查的是 Taro.getStorageSync('Avatar')，但这个字段从未被设置过
2. 数据同步缺失：useUser hook 中的 saveUserToStorage 函数没有保存头像和昵称到本地存储
3. 状态不一致：用户信息更新后，本地存储和 useUser hook 状态不同步

具体问题

1. Header.tsx 第42行：

   if(!Taro.getStorageSync('Avatar')){
     // 提示用户上传头像和昵称
   }
   

   这里检查的 Avatar 字段从未被保存到本地存储

2. useUser.ts saveUserToStorage 函数：

   const saveUserToStorage = (token: string, userInfo: User) => {
     Taro.setStorageSync('access_token', token);
     Taro.setStorageSync('User', userInfo);
     Taro.setStorageSync('UserId', userInfo.userId);
     Taro.setStorageSync('TenantId', userInfo.tenantId);
     Taro.setStorageSync('Phone', userInfo.phone);
     // 缺少头像和昵称的保存
   }
   

修复方案

1. 修复 saveUserToStorage 函数

在 src/hooks/useUser.ts 中添加头像和昵称的保存：

const saveUserToStorage = (token: string, userInfo: User) => {
  try {
    Taro.setStorageSync('access_token', token);
    Taro.setStorageSync('User', userInfo);
    Taro.setStorageSync('UserId', userInfo.userId);
    Taro.setStorageSync('TenantId', userInfo.tenantId);
    Taro.setStorageSync('Phone', userInfo.phone);
    // 保存头像和昵称信息
    if (userInfo.avatar) {
      Taro.setStorageSync('Avatar', userInfo.avatar);
    }
    if (userInfo.nickname) {
      Taro.setStorageSync('Nickname', userInfo.nickname);
    }
  } catch (error) {
    console.error('保存用户数据失败:', error);
  }
};

2. 优化 Header.tsx 检查逻辑

在 src/pages/index/Header.tsx 中改进检查逻辑：

// 检查用户是否已登录并且有头像和昵称
if (isLoggedIn) {
  const hasAvatar = user?.avatar || Taro.getStorageSync('Avatar');
  const hasNickname = user?.nickname || Taro.getStorageSync('Nickname');
  
  if (!hasAvatar || !hasNickname) {
    Taro.showToast({
      title: '您还没有上传头像和昵称',
      icon: 'none'
    })
    setTimeout(() => {
      Taro.navigateTo({
        url: '/user/profile/profile'
      })
    }, 3000)
    return false;
  }
}

修复效果

✅ 数据同步

• 用户更新头像/昵称后，信息会同时保存到 useUser hook 状态和本地存储
• 确保数据的一致性和持久化

✅ 检查逻辑优化

• 同时检查 useUser hook 中的用户信息和本地存储
• 提供双重保障，确保检查的准确性

✅ 用户体验改善

• 用户更新头像/昵称后不再收到错误提示
• 信息更新立即生效，无需重新登录

技术细节

数据流程

1. 用户更新信息 → profile.tsx 调用 updateUser()
2. updateUser() → 调用 API 更新服务器数据
3. 更新成功 → 调用 saveUserToStorage() 保存到本地
4. 本地存储 → 同时更新 useUser 状态和 Taro 存储
5. Header 检查 → 检查两个数据源确保准确性

关键修改点

1. useUser.ts 第99-106行：添加头像和昵称的本地存储
2. Header.tsx 第41-58行：优化检查逻辑，支持双重验证

兼容性

• 向后兼容：旧的检查逻辑仍然有效
• 渐进增强：新的检查逻辑提供更好的准确性
• 数据迁移：现有用户的数据会在下次更新时自动同步

测试建议

测试场景

1. 新用户注册：验证首次上传头像/昵称后不再提示
2. 现有用户更新：验证更新头像/昵称后立即生效
3. 应用重启：验证重启应用后信息仍然正确
4. 网络异常：验证网络异常时的降级处理

验证步骤

1. 清除应用数据
2. 登录并上传头像/昵称
3. 返回首页检查是否还有提示
4. 重启应用再次检查
5. 修改头像/昵称并验证同步

总结

通过修复 saveUserToStorage 函数和优化 Header.tsx 的检查逻辑，我们解决了头像昵称同步问题，确保用户更新信息后能够立即生效，提升了用户体验。