# React 错误模式
常见的 React/Next.js 错误及其诊断与解决方案。
## 水合错误 (Hydration Errors)
### Hydration Mismatch
Hydration failed because the initial UI does not match what was rendered on the server.
**原因**：
1. 服务器和客户端渲染的内容不一致
2. 在渲染期间使用了仅限浏览器的 API
3. 日期/时间格式差异
4. 渲染中包含随机值
**常见罪魁祸首**：
jsx
// 这些会导致水合不匹配
{new Date().toLocaleString()} // 时间不同
{Math.random()} // 随机数不同
{typeof window !== 'undefined'} // 条件不同
{localStorage.getItem('key')} // 服务器上没有 localStorage
**解决方案**：
jsx
// 对仅限客户端的代码使用 useEffect
const [mounted, setMounted] = useState(false)
useEffect(() => {
setMounted(true)
}, [])
if (!mounted) return null // 或者返回骨架屏
return
{localStorage.getItem('theme')}
jsx
// 抑制水合警告（最后手段）
jsx
// 在 Next.js App Router 中使用 'use client' 指令
'use client'
export default function ClientComponent() {
// 仅限客户端的代码
}
---
### Text content does not match server-rendered HTML
Text content does not match server-rendered HTML.
**与水合不匹配相同** - 服务器和客户端之间的内容存在差异。
**快速检查**：
1. 是否使用了 `Date` 或 `Math.random()`？
2. 是否访问了 `window`、`document` 或 `localStorage`？
3. 是否使用了浏览器特定的格式化？
## Hooks 错误
### Invalid hook call
Error: Invalid hook call. Hooks can only be called inside of the body of a function component.
**原因**：
1. 在组件外部调用 Hook
2. 在类组件中调用 Hook
3. 在普通函数中调用 Hook
4. 存在多个 React 版本
5. 违反 Hook 规则
**诊断**：
bash
# 检查是否存在多个 React 版本
npm ls react
npm ls react-dom
**解决方案**：
jsx
// 错误 - 在普通函数中调用 Hook
function getData() {
const [data, setData] = useState(null) // 错误！
}
// 正确 - 在组件中调用 Hook
function MyComponent() {
const [data, setData] = useState(null) // 正确
}
// 正确 - 自定义 Hook
function useData() {
const [data, setData] = useState(null)
return data
}
bash
# 修复多个 React 版本问题
npm dedupe
# 或者检查并对齐 package.json 中的版本
---
### Rendered more hooks than during previous render
Rende
粤公网安备44030002003366号