---
date: 2026-04-01
type: debugging-pattern
severity: high
tags: [layout, css, state-management, next.js]
---

# 修 Bug 必须追到根因，不能只改表面

## 经验

修复前端布局和状态问题时，不要只改"最近的一层"。必须沿着组件树/状态链路往上追，找到真正产生问题的那一行。

## 具体案例

### 双滚动条
- 错误做法：改 siteattendance layout 的 wrapper
- 正确做法：改 LayoutWrapper 的 `overflow-y-auto`（根源）
- 教训：页面滚动问题要从最外层 layout 开始排查

### 语言切换导致页面刷新
- 错误做法：只把 `window.location.reload()` 改为 `changeLocale()`
- 正确做法：还要把 auth state 从 `useEffect + localStorage` 改为 Zustand reactive state
- 教训：state 变化的副作用链路必须完整追查

### Leaflet 地图空白
- 错误做法：在 globals.css 里 `@import "leaflet/dist/leaflet.css"`
- 正确做法：动态 import leaflet 模块 + CDN CSS + ResizeObserver
- 教训：Next.js + Tailwind v4 里第三方 CSS 不能用 @import 引入

## 检查清单

修 bug 前问自己：
1. 这个现象的**直接原因**是什么？（哪行代码产生的）
2. 这行代码为什么会这样？**上游是谁控制的**？
3. 改了之后，**下游会不会有副作用**？
4. 有没有**其他组件依赖同一个状态/样式**？