205 lines
5.5 KiB
Markdown
205 lines
5.5 KiB
Markdown
# GuideBar 隐藏问题调试指南
|
||
|
||
## 当前实现
|
||
|
||
### 1. Store 配置 (`src/store/global.ts`)
|
||
```typescript
|
||
// GuideBar 状态
|
||
showGuideBar: true,
|
||
guideBarZIndex: 'high',
|
||
|
||
// 控制方法
|
||
setShowGuideBar: (show: boolean) => {
|
||
console.log('[Store] setShowGuideBar called with:', show);
|
||
set({ showGuideBar: show });
|
||
console.log('[Store] showGuideBar updated to:', show);
|
||
},
|
||
```
|
||
|
||
### 2. HomeNavbar 使用 (`src/components/HomeNavbar/index.tsx`)
|
||
```typescript
|
||
const { getLocationLoading, statusNavbarHeightInfo, setShowGuideBar } = useGlobalState();
|
||
|
||
const showLocationConfirmDialog = (detectedProvince: string, cachedCity: [string, string]) => {
|
||
console.log('[LocationDialog] 准备显示定位确认弹窗，隐藏 GuideBar');
|
||
setLocationDialogData({ detectedProvince, cachedCity });
|
||
setLocationDialogVisible(true);
|
||
setShowGuideBar(false); // 隐藏 GuideBar
|
||
console.log('[LocationDialog] setShowGuideBar(false) 已调用');
|
||
};
|
||
```
|
||
|
||
### 3. MainPage 渲染 (`src/main_pages/index.tsx`)
|
||
```typescript
|
||
const { showGuideBar, guideBarZIndex, setShowGuideBar, setGuideBarZIndex } = useGlobalState();
|
||
|
||
// 渲染逻辑
|
||
{
|
||
showGuideBar ?
|
||
<GuideBar
|
||
currentPage={currentTab}
|
||
guideBarClassName={guideBarZIndex === 'low' ? 'guide-bar-low-z-index' : 'guide-bar-high-z-index'}
|
||
onTabChange={handleTabChange}
|
||
onPublishMenuVisibleChange={handlePublishMenuVisibleChange}
|
||
/> :
|
||
null
|
||
}
|
||
```
|
||
|
||
## 调试步骤
|
||
|
||
### 步骤 1: 检查控制台日志
|
||
当 `LocationConfirmDialog` 弹窗显示时，应该能看到以下日志：
|
||
```
|
||
[LocationDialog] 准备显示定位确认弹窗，隐藏 GuideBar
|
||
[Store] setShowGuideBar called with: false
|
||
[Store] showGuideBar updated to: false
|
||
[LocationDialog] setShowGuideBar(false) 已调用
|
||
```
|
||
|
||
### 步骤 2: 检查是否有其他组件覆盖状态
|
||
搜索以下可能的干扰：
|
||
- `UserInfo` 组件通过 `FamilyContext` 调用 `handleGrandchildTrigger`
|
||
- 其他组件可能直接调用 `setShowGuideBar(true)`
|
||
|
||
### 步骤 3: 使用 React DevTools 检查状态
|
||
1. 打开 React DevTools
|
||
2. 找到 `MainPage` 组件
|
||
3. 查看 `showGuideBar` 的实时值
|
||
4. 当弹窗显示时，检查值是否变为 `false`
|
||
|
||
### 步骤 4: 检查 CSS 样式
|
||
如果状态正确但 GuideBar 仍然可见，可能是 CSS 问题：
|
||
```scss
|
||
// 检查 GuideBar 的样式是否有 !important 覆盖
|
||
.guide-bar-container {
|
||
display: block; // 不应该有 !important
|
||
}
|
||
```
|
||
|
||
## 可能的问题原因
|
||
|
||
### 原因 1: UserInfo 组件干扰
|
||
`src/components/UserInfo/index.tsx` 使用 `FamilyContext` 控制 GuideBar：
|
||
```typescript
|
||
const { handleGrandchildTrigger } = useContext(FamilyContext);
|
||
|
||
// 可能在某些情况下调用
|
||
handleGrandchildTrigger(false); // 这会设置 setShowGuideBar(true)
|
||
```
|
||
|
||
**解决方案**：检查 `UserInfo` 组件是否在 `LocationConfirmDialog` 显示时被触发。
|
||
|
||
### 原因 2: useEffect 依赖问题
|
||
`HomeNavbar` 中的 `useEffect` 可能在状态更新后重新运行：
|
||
```typescript
|
||
useEffect(() => {
|
||
// 检查这里的逻辑
|
||
}, [locationProvince]);
|
||
```
|
||
|
||
**解决方案**：确保 `useEffect` 不会在弹窗显示后重置状态。
|
||
|
||
### 原因 3: 异步状态更新
|
||
Zustand 的状态更新应该是同步的，但如果有异步操作可能延迟：
|
||
```typescript
|
||
setShowGuideBar(false);
|
||
// 如果这里有异步操作，可能导致状态被覆盖
|
||
await someAsyncOperation();
|
||
```
|
||
|
||
**解决方案**：确保 `setShowGuideBar(false)` 之后没有异步操作重置状态。
|
||
|
||
## 测试方法
|
||
|
||
### 方法 1: 手动测试
|
||
1. 清除缓存：`Taro.clearStorageSync()`
|
||
2. 重新打开小程序
|
||
3. 等待定位完成
|
||
4. 观察是否弹出 `LocationConfirmDialog`
|
||
5. 检查 GuideBar 是否隐藏
|
||
|
||
### 方法 2: 代码测试
|
||
在 `HomeNavbar` 中添加测试按钮：
|
||
```tsx
|
||
<Button onClick={() => {
|
||
console.log('[Test] 手动触发弹窗');
|
||
showLocationConfirmDialog('北京', ['中国', '上海']);
|
||
}}>
|
||
测试弹窗
|
||
</Button>
|
||
```
|
||
|
||
### 方法 3: 添加更多日志
|
||
在 `MainPage` 中监听 `showGuideBar` 变化：
|
||
```tsx
|
||
useEffect(() => {
|
||
console.log('[MainPage] showGuideBar 状态变化:', showGuideBar);
|
||
}, [showGuideBar]);
|
||
```
|
||
|
||
## 验证清单
|
||
|
||
- [ ] 控制台显示正确的日志
|
||
- [ ] React DevTools 显示 `showGuideBar` 为 `false`
|
||
- [ ] GuideBar 组件不在 DOM 中渲染（使用元素审查工具检查）
|
||
- [ ] 没有其他组件调用 `setShowGuideBar(true)`
|
||
- [ ] CSS 样式没有强制显示 GuideBar
|
||
|
||
## 紧急修复方案
|
||
|
||
如果以上都无法解决，可以尝试以下紧急方案：
|
||
|
||
### 方案 1: 直接在 LocationConfirmDialog 中控制
|
||
```tsx
|
||
// src/components/LocationConfirmDialog/index.tsx
|
||
import { useGlobalState } from "@/store/global";
|
||
|
||
const LocationConfirmDialog = (props) => {
|
||
const { setShowGuideBar } = useGlobalState();
|
||
|
||
useEffect(() => {
|
||
if (visible) {
|
||
setShowGuideBar(false);
|
||
}
|
||
return () => {
|
||
setShowGuideBar(true);
|
||
};
|
||
}, [visible, setShowGuideBar]);
|
||
|
||
// ...
|
||
};
|
||
```
|
||
|
||
### 方案 2: 使用 CSS 强制隐藏
|
||
```scss
|
||
// 当弹窗显示时，添加 class 隐藏 GuideBar
|
||
.location-dialog-visible {
|
||
.guide-bar-container {
|
||
display: none !important;
|
||
}
|
||
}
|
||
```
|
||
|
||
### 方案 3: 添加延迟
|
||
```typescript
|
||
const showLocationConfirmDialog = (detectedProvince: string, cachedCity: [string, string]) => {
|
||
setLocationDialogData({ detectedProvince, cachedCity });
|
||
setLocationDialogVisible(true);
|
||
|
||
// 添加微小延迟确保状态更新
|
||
setTimeout(() => {
|
||
setShowGuideBar(false);
|
||
}, 0);
|
||
};
|
||
```
|
||
|
||
## 联系支持
|
||
|
||
如果问题仍然存在，请提供：
|
||
1. 完整的控制台日志
|
||
2. React DevTools 截图
|
||
3. 复现步骤
|
||
4. 小程序版本和环境信息
|
||
|