{
  "id": "react/usecontext-must-be-within-provider",
  "signature": "TypeError: Cannot read properties of undefined (reading 'dispatch')",
  "signature_zh": "类型错误：无法读取未定义的属性（读取 'dispatch'）",
  "regex": "TypeError: Cannot read properties of undefined \\(reading 'dispatch'\\)",
  "domain": "react",
  "category": "runtime_error",
  "subcategory": null,
  "root_cause": "useContext is called outside the corresponding Context Provider, so the context value is undefined.",
  "root_cause_type": "generic",
  "root_cause_zh": "useContext 在对应的 Context Provider 外部调用，导致上下文值为 undefined。",
  "versions": [
    {
      "version": "React 16.8+",
      "introduced": null,
      "deprecated": null,
      "removed": null,
      "behavior_change": null,
      "status": "active"
    },
    {
      "version": "React 17",
      "introduced": null,
      "deprecated": null,
      "removed": null,
      "behavior_change": null,
      "status": "active"
    },
    {
      "version": "React 18",
      "introduced": null,
      "deprecated": null,
      "removed": null,
      "behavior_change": null,
      "status": "active"
    },
    {
      "version": "React 19",
      "introduced": null,
      "deprecated": null,
      "removed": null,
      "behavior_change": null,
      "status": "active"
    }
  ],
  "os_specific": {},
  "dead_ends": [
    {
      "action": "",
      "why_fails": "Maskes the error but does not solve the structural issue; dispatch will be a no-op if no Provider is present, leading to silent failures.",
      "fail_rate": 0.6,
      "condition": "",
      "sources": []
    },
    {
      "action": "",
      "why_fails": "Only works in tests or specific scenarios; in production, the real Provider is missing, so the mock may not provide the correct dispatch function.",
      "fail_rate": 0.7,
      "condition": "",
      "sources": []
    },
    {
      "action": "",
      "why_fails": "Prevents the error but dispatch becomes undefined, causing subsequent calls to fail with 'dispatch is not a function'.",
      "fail_rate": 0.5,
      "condition": "",
      "sources": []
    }
  ],
  "workarounds": [
    {
      "action": "Ensure the component is rendered inside the corresponding Context Provider. For example, move the component inside the Provider tree:\n\n// App.jsx\nimport { MyProvider } from './MyContext';\nimport ChildComponent from './ChildComponent';\n\nfunction App() {\n  return (\n    <MyProvider>\n      <ChildComponent />\n    </MyProvider>\n  );\n}\n\nexport default App;",
      "success_rate": 0.95,
      "how": "Ensure the component is rendered inside the corresponding Context Provider. For example, move the component inside the Provider tree:\n\n// App.jsx\nimport { MyProvider } from './MyContext';\nimport ChildComponent from './ChildComponent';\n\nfunction App() {\n  return (\n    <MyProvider>\n      <ChildComponent />\n    </MyProvider>\n  );\n}\n\nexport default App;",
      "condition": "",
      "sources": []
    },
    {
      "action": "If the component must sometimes exist outside the Provider, provide a fallback default value in createContext:\n\nconst MyContext = createContext({ dispatch: () => console.warn('dispatch called outside Provider') });",
      "success_rate": 0.85,
      "how": "If the component must sometimes exist outside the Provider, provide a fallback default value in createContext:\n\nconst MyContext = createContext({ dispatch: () => console.warn('dispatch called outside Provider') });",
      "condition": "",
      "sources": []
    },
    {
      "action": "Add a guard clause in the component to render nothing or a fallback UI when context is missing:\n\nfunction ChildComponent() {\n  const context = useContext(MyContext);\n  if (!context) return null; // or <FallbackUI />\n  const { dispatch } = context;\n  // ...\n}",
      "success_rate": 0.9,
      "how": "Add a guard clause in the component to render nothing or a fallback UI when context is missing:\n\nfunction ChildComponent() {\n  const context = useContext(MyContext);\n  if (!context) return null; // or <FallbackUI />\n  const { dispatch } = context;\n  // ...\n}",
      "condition": "",
      "sources": []
    }
  ],
  "workarounds_zh": [
    "Ensure the component is rendered inside the corresponding Context Provider. For example, move the component inside the Provider tree:\n\n// App.jsx\nimport { MyProvider } from './MyContext';\nimport ChildComponent from './ChildComponent';\n\nfunction App() {\n  return (\n    <MyProvider>\n      <ChildComponent />\n    </MyProvider>\n  );\n}\n\nexport default App;",
    "If the component must sometimes exist outside the Provider, provide a fallback default value in createContext:\n\nconst MyContext = createContext({ dispatch: () => console.warn('dispatch called outside Provider') });",
    "Add a guard clause in the component to render nothing or a fallback UI when context is missing:\n\nfunction ChildComponent() {\n  const context = useContext(MyContext);\n  if (!context) return null; // or <FallbackUI />\n  const { dispatch } = context;\n  // ...\n}"
  ],
  "transition_graph": {
    "leads_to": [],
    "preceded_by": [],
    "frequently_confused_with": []
  },
  "official_doc_url": "https://react.dev/reference/react/useContext",
  "official_doc_section": null,
  "error_code": null,
  "verification_tier": "ai_generated",
  "confidence": 0.88,
  "fix_success_rate": 0.92,
  "resolvable": "true",
  "first_seen": "2023-03-15",
  "last_confirmed": "2024-06-01",
  "last_updated": "2024-06-01",
  "evidence_count": 1,
  "tags": [],
  "locale": "en",
  "aliases": []
}