'Why: TypeError: Cannot read property 'useContext' of null
I have no clue why I got this, I added some Redux Thunk, some useAppSelector in slice, and edited ./store.ts.
It does not show any line number.
TypeError: Cannot read property 'useContext' of null
> Build error occurred
TypeError: Cannot read property 'useContext' of null
at exports.useContext (/Users/kukodajanos/Workspace/Tikex/Portal/Team/node_modules/react/cjs/react.production.min.js:24:118)
at useReduxContext (/Users/kukodajanos/Workspace/Tikex/Portal/Team/node_modules/react-redux/lib/hooks/useReduxContext.js:27:46)
at useSelector (/Users/kukodajanos/Workspace/Tikex/Portal/Team/node_modules/react-redux/lib/hooks/useSelector.js:53:9)
I use useConext
also. Is this issue Redux
related or useContext
related?
I did not touch this part of the code, but only here useContext
is used:
import { createContext, useCallback, useContext, useState } from 'react'
import { v4 as uuidv4 } from 'uuid'
const AppContext = createContext(undefined)
export const AppProvider = ({ children }) => {
const [openedModals, setOpenedModals] = useState([])
const tempUserId = uuidv4()
const isModalOpened = useCallback(
(modalName: string) => openedModals.includes(modalName),
[openedModals]
)
const setModalOpened = useCallback(
(modalName: string) => (isOpened: boolean) => {
if (isOpened) {
!openedModals.includes(modalName) &&
setOpenedModals((prev) => [...prev, modalName])
} else {
setOpenedModals((prev) => prev.filter((modal) => modal !== modalName))
}
},
[openedModals]
)
return (
<AppContext.Provider value={{ isModalOpened, setModalOpened, tempUserId }}>
{children}
</AppContext.Provider>
)
}
export const AppConsumer = AppContext.Consumer
export const useAppContext = () => {
const context = useContext(AppContext)
return context
}
export default AppContext
I have some new selectos in slice.ts
export const authnResS = (state: RootState) => state.tikexAPI.authnRes
export const authnRes = useAppSelector(authnResS)
export const userDTOS = createSelector(
[authnResS],
(authnRes?: AuthnRes) => authnRes?.data
)
export const userDTO = () => useAppSelector(userDTOS)
export const organizationsS = createSelector(
(userDTO?: UserDTO) => userDTO?.organizations
)
export const organizations = () => useAppSelector(organizationsS)
Sources
This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow
Solution | Source |
---|