TypeError: Cannot read properties of null (reading 'useContext') useContext

Jtiiin:K·2023년 11월 15일
0
post-thumbnail

error

TypeError: Cannot read properties of null (reading 'useContext')
useContext

문제

useContext에서 redux로 바꾸는 과정에서
useContext를 다 지웠는데도 계속 useContext 관련 오류가 났다

원인

처음에 redux 적용 방법을 잘 몰라서 reducer 파일 내부에서 useNavigate를 사용했었는데 그때문에 오류가 났음
(useNavigate 내부에서 usecontext를 사용)

chatGPT 답변 :
이 오류 메시지는 일반적으로 함수 컴포넌트 내부에서 특정 훅을 호출하려 할 때, 그 훅이 사용될 수 없는 상황에서 발생합니다. 실제로는 useNavigate를 사용할 때 발생하는 것이라면, 이는 리액트 라우터의 일부 훅이 내부적으로 useContext를 사용하고 있기 때문입니다.

내부적으로 useNavigate는 리액트 라우터에서 제공하는 useContext를 사용하여 라우터 상태를 관리합니다. 그래서 오류 메시지에는 useContext라는 용어가 나타납니다.

그렇다면 왜 useNavigate 때문에 오류가 나타날까요? 아마도 useNavigate가 호출되는 시점이나 컴포넌트의 마운트 여부 등이 문제가 되고 있는 것으로 보입니다. 아래의 몇 가지 팁을 통해 문제를 해결해보세요:

컴포넌트 마운트 시점 확인하기: useNavigate를 사용하는 부분이 컴포넌트가 마운트된 후에 실행되도록 보장하세요. 일반적으로 함수 컴포넌트의 최상위 레벨에서 호출되어야 합니다.

라우터 컴포넌트 내부에서 사용하기: useNavigate를 라우터 컴포넌트 내부에서 사용하도록 확인하세요. 라우터 컴포넌트 외부에서 사용하려고 할 때도 이런 문제가 발생할 수 있습니다.

해결

useNavigate를 지우니 해결됐다

profile
호기심 많은 귀차니즘의 공부 일기

0개의 댓글