react runtime_error ai_generated true

TypeError: Cannot read properties of undefined (reading 'dispatch')

ID: react/usecontext-must-be-within-provider

Also available as: JSON · Markdown · 中文
92%Fix Rate
88%Confidence
1Evidence
2023-03-15First Seen

Version Compatibility

VersionStatusIntroducedDeprecatedNotes
React 16.8+ active — — —
React 17 active — — —
React 18 active — — —
React 19 active — — —

Root Cause

useContext is called outside the corresponding Context Provider, so the context value is undefined.

generic

中文

useContext 在对应的 Context Provider 外部调用，导致上下文值为 undefined。

Official Documentation

https://react.dev/reference/react/useContext

Workarounds

  1. 95% success Ensure the component is rendered inside the corresponding Context Provider. For example, move the component inside the Provider tree: // App.jsx import { MyProvider } from './MyContext'; import ChildComponent from './ChildComponent'; function App() { return ( <MyProvider> <ChildComponent /> </MyProvider> ); } export default App; 
    Ensure the component is rendered inside the corresponding Context Provider. For example, move the component inside the Provider tree:

// App.jsx
import { MyProvider } from './MyContext';
import ChildComponent from './ChildComponent';

function App() {
  return (
    <MyProvider>
      <ChildComponent />
    </MyProvider>
  );
}

export default App;
  2. 85% success If the component must sometimes exist outside the Provider, provide a fallback default value in createContext: const MyContext = createContext({ dispatch: () => console.warn('dispatch called outside Provider') }); 
    If the component must sometimes exist outside the Provider, provide a fallback default value in createContext:

const MyContext = createContext({ dispatch: () => console.warn('dispatch called outside Provider') });
  3. 90% success Add a guard clause in the component to render nothing or a fallback UI when context is missing: function ChildComponent() { const context = useContext(MyContext); if (!context) return null; // or <FallbackUI /> const { dispatch } = context; // ... } 
    Add a guard clause in the component to render nothing or a fallback UI when context is missing:

function ChildComponent() {
  const context = useContext(MyContext);
  if (!context) return null; // or <FallbackUI />
  const { dispatch } = context;
  // ...
}

中文步骤

  1. Ensure the component is rendered inside the corresponding Context Provider. For example, move the component inside the Provider tree:

// App.jsx
import { MyProvider } from './MyContext';
import ChildComponent from './ChildComponent';

function App() {
  return (
    <MyProvider>
      <ChildComponent />
    </MyProvider>
  );
}

export default App;
  2. If the component must sometimes exist outside the Provider, provide a fallback default value in createContext:

const MyContext = createContext({ dispatch: () => console.warn('dispatch called outside Provider') });
  3. Add a guard clause in the component to render nothing or a fallback UI when context is missing:

function ChildComponent() {
  const context = useContext(MyContext);
  if (!context) return null; // or <FallbackUI />
  const { dispatch } = context;
  // ...
}

Dead Ends

Common approaches that don't work:

  1. 60% fail

    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.

  2. 70% fail

    Only works in tests or specific scenarios; in production, the real Provider is missing, so the mock may not provide the correct dispatch function.

  3. 50% fail

    Prevents the error but dispatch becomes undefined, causing subsequent calls to fail with 'dispatch is not a function'.