{
  "id": "react/controlled-input-with-null-value",
  "signature": "Warning: A component is changing a controlled input to be uncontrolled (or vice versa). Input elements should not switch from controlled to uncontrolled (or vice versa). Decide between using a controlled or uncontrolled input element for the lifetime of the component.",
  "signature_zh": "警告：组件正在将受控输入更改为非受控（或反之）。输入元素不应在受控和非受控之间切换。请在组件的生命周期内决定使用受控还是非受控输入元素。",
  "regex": "Warning: A component is changing a controlled input to be uncontrolled \\(or vice versa\\)",
  "domain": "react",
  "category": "runtime_error",
  "subcategory": null,
  "root_cause": "An input's value prop changed from a defined value to undefined or null (or vice versa) across renders, causing React to interpret the input as switching between controlled and uncontrolled modes.",
  "root_cause_type": "generic",
  "root_cause_zh": "输入框的 value prop 在渲染之间从已定义值变为 undefined 或 null（或反之），导致 React 将输入解释为在受控和非受控模式之间切换。",
  "versions": [
    {
      "version": "React 16.8+",
      "introduced": null,
      "deprecated": null,
      "removed": null,
      "behavior_change": null,
      "status": "active"
    },
    {
      "version": "React 17.0.2",
      "introduced": null,
      "deprecated": null,
      "removed": null,
      "behavior_change": null,
      "status": "active"
    },
    {
      "version": "React 18.2.0",
      "introduced": null,
      "deprecated": null,
      "removed": null,
      "behavior_change": null,
      "status": "active"
    }
  ],
  "os_specific": {},
  "dead_ends": [
    {
      "action": "Setting value to empty string '' instead of null/undefined",
      "why_fails": "If the underlying state is null, converting to '' may mask the real issue and cause empty input when user expects null state.",
      "fail_rate": 0.3,
      "condition": "",
      "sources": []
    },
    {
      "action": "Using defaultValue instead of value",
      "why_fails": "Switching to uncontrolled mode may break form logic if you need to programmatically update the input value later.",
      "fail_rate": 0.5,
      "condition": "",
      "sources": []
    },
    {
      "action": "Adding a key prop to force remount",
      "why_fails": "Remounting the component on every state change defeats the purpose of controlled inputs and may cause performance issues or loss of focus.",
      "fail_rate": 0.6,
      "condition": "",
      "sources": []
    }
  ],
  "workarounds": [
    {
      "action": "Ensure the value prop is always a defined string or number. For example: <input value={state ?? ''} onChange={...} />",
      "success_rate": 0.85,
      "how": "Ensure the value prop is always a defined string or number. For example: <input value={state ?? ''} onChange={...} />",
      "condition": "",
      "sources": []
    },
    {
      "action": "If the value is intentionally null, use uncontrolled input with defaultValue and a key to reset: <input key={resetKey} defaultValue={initialValue} />",
      "success_rate": 0.7,
      "how": "If the value is intentionally null, use uncontrolled input with defaultValue and a key to reset: <input key={resetKey} defaultValue={initialValue} />",
      "condition": "",
      "sources": []
    }
  ],
  "workarounds_zh": [
    "Ensure the value prop is always a defined string or number. For example: <input value={state ?? ''} onChange={...} />",
    "If the value is intentionally null, use uncontrolled input with defaultValue and a key to reset: <input key={resetKey} defaultValue={initialValue} />"
  ],
  "transition_graph": {
    "leads_to": [],
    "preceded_by": [],
    "frequently_confused_with": []
  },
  "official_doc_url": "https://reactjs.org/docs/forms.html#controlled-components",
  "official_doc_section": null,
  "error_code": null,
  "verification_tier": "ai_generated",
  "confidence": 0.85,
  "fix_success_rate": 0.88,
  "resolvable": "true",
  "first_seen": "2023-03-15",
  "last_confirmed": "2024-06-01",
  "last_updated": "2024-06-01",
  "evidence_count": 1,
  "tags": [],
  "locale": "en",
  "aliases": []
}