# 警告：组件正在将受控输入更改为非受控（或反之）。输入元素不应在受控和非受控之间切换。请在组件的生命周期内决定使用受控还是非受控输入元素。

- **ID:** `react/controlled-input-with-null-value`
- **领域:** react
- **类别:** runtime_error
- **验证级别:** ai_generated
- **修复率:** 88%

## 根因

输入框的 value prop 在渲染之间从已定义值变为 undefined 或 null（或反之），导致 React 将输入解释为在受控和非受控模式之间切换。

## 版本兼容性

| 版本 | 状态 | 引入 | 弃用 |
|------|------|------|------|
| React 16.8+ | active | — | — |
| React 17.0.2 | active | — | — |
| React 18.2.0 | active | — | — |

## 解决方案

1. ```
   Ensure the value prop is always a defined string or number. For example: <input value={state ?? ''} onChange={...} />
   ```
2. ```
   If the value is intentionally null, use uncontrolled input with defaultValue and a key to reset: <input key={resetKey} defaultValue={initialValue} />
   ```

## 无效尝试

- **Setting value to empty string '' instead of null/undefined** — If the underlying state is null, converting to '' may mask the real issue and cause empty input when user expects null state. (30% 失败率)
- **Using defaultValue instead of value** — Switching to uncontrolled mode may break form logic if you need to programmatically update the input value later. (50% 失败率)
- **Adding a key prop to force remount** — Remounting the component on every state change defeats the purpose of controlled inputs and may cause performance issues or loss of focus. (60% 失败率)