useContext() devuelve el valor predeterminado pasado a createContext() cuando no hay un Provider coincidente en el árbol de componentes por encima de él. Si el valor predeterminado es null o undefined y accedes a propiedades sobre él, obtienes un TypeError en tiempo de ejecución.
Por qué ocurre
- •El componente que usa useContext se renderiza fuera del árbol del Provider.
- •El Provider se coloca demasiado abajo en el árbol de componentes, perdiendo algunos consumidores.
- •createContext() se llamó con null como predeterminado y ningún Provider envuelve al consumidor.
- •El Provider y el consumidor están en diferentes raíces React.
Ejemplos
Código que causa el error
const ThemeContext = createContext(null);
function Button() {
const theme = useContext(ThemeContext); // no Provider above
return <button style={{ color: theme.primary }}>Click</button>;
}Error en la terminal
TypeError: Cannot read properties of null (reading 'primary')
Cómo solucionarlo
Asegúrate de que el Provider envuelva todos los componentes que consumen el contexto. Proporciona un valor predeterminado significativo a createContext() para que la aplicación degrade correctamente sin un Provider. Crea un hook personalizado que lance un mensaje de error claro si el valor del contexto es null.
Código corregido
function App() {
return (
<ThemeContext.Provider value={{ primary: "blue" }}>
<Button />
</ThemeContext.Provider>
);
}Errores relacionados
¿Listo para practicar tu inglés en el trabajo?
Lingua-e tiene ejercicios interactivos basados en conversaciones reales de developers: standups, code reviews, retrospectivas y más. Practica hasta que salga solo.
Prueba Lingua-e gratis