133 lines
4.3 KiB
Markdown
133 lines
4.3 KiB
Markdown
# 头像昵称同步问题修复说明
|
||
|
||
## 问题描述
|
||
用户更新了头像和昵称后，首页仍然提示"您还没有上传头像和昵称"，导致用户体验不佳。
|
||
|
||
## 问题分析
|
||
|
||
### 根本原因
|
||
1. **检查逻辑错误**：`Header.tsx` 中检查的是 `Taro.getStorageSync('Avatar')`，但这个字段从未被设置过
|
||
2. **数据同步缺失**：`useUser` hook 中的 `saveUserToStorage` 函数没有保存头像和昵称到本地存储
|
||
3. **状态不一致**：用户信息更新后，本地存储和 `useUser` hook 状态不同步
|
||
|
||
### 具体问题
|
||
1. **Header.tsx 第42行**：
|
||
```typescript
|
||
if(!Taro.getStorageSync('Avatar')){
|
||
// 提示用户上传头像和昵称
|
||
}
|
||
```
|
||
这里检查的 `Avatar` 字段从未被保存到本地存储
|
||
|
||
2. **useUser.ts saveUserToStorage 函数**：
|
||
```typescript
|
||
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` 中添加头像和昵称的保存：
|
||
|
||
```typescript
|
||
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` 中改进检查逻辑：
|
||
|
||
```typescript
|
||
// 检查用户是否已登录并且有头像和昵称
|
||
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` 的检查逻辑，我们解决了头像昵称同步问题，确保用户更新信息后能够立即生效，提升了用户体验。
|