# 错误：无效的 Hook 调用。Hook 只能在函数组件的主体中调用。可能的原因：1. React 和渲染器（如 React DOM）版本不匹配；2. 违反了 Hook 规则；3. 同一个应用中有多个 React 副本。

- **ID:** `react/invalid-hook-call-inside-callback`
- **领域:** react
- **类别:** runtime_error
- **验证级别:** ai_generated
- **修复率:** 93%

## 根因

Hook 在函数组件的顶层之外被调用，例如在回调中、条件性地或在类组件中。也可能因捆绑了多个 React 副本而出现。

## 版本兼容性

| 版本 | 状态 | 引入 | 弃用 |
|------|------|------|------|
| React 16.8+ | active | — | — |
| React 17.x | active | — | — |
| React 18.x | active | — | — |

## 解决方案

1. ```
   Ensure all hooks are called at the top level of a function component, not inside loops, conditions, or nested functions. Example: function MyComponent() { const [state, setState] = useState(0); // correct }
   ```
2. ```
   Check for duplicate React versions by running npm ls react or yarn why react. If duplicates exist, deduplicate with npm dedupe or use resolutions in package.json.
   ```
3. ```
   If using a class component, refactor to a function component with hooks, or keep using class lifecycle methods instead of hooks.
   ```

## 无效尝试

- **** — Hooks must be called synchronously during render; async callbacks break the rules of hooks. (95% 失败率)
- **** — Hooks must be called unconditionally at the top level; conditional calls change the call order between renders. (90% 失败率)
- **** — Multiple React copies cause the hook reference to mismatch between packages. (80% 失败率)