단순한 코드가 있다.
next-auth 의 useSession 을 사용하여, 로그인한 유저의 데이터값을 가져오고
데이터값을 활용하여 fetch 를 하는 코드이다.
const MyTestResults = (props: { userId: string | null | undefined }) => {
const { userId } = props; // 페이지에서 useSession 을 통해, 로그인한 유저의 아이디를 넘겨받는다.
const [userResultData, setUserResultData] = useState<UserTestType[]>();
useEffect(() => {
(async () => {
const userData = await fetch("/api/get-user-test-data", {
method: "POST",
body: JSON.stringify({
userId: userId, // Id를 넣는다.
}),
headers: {
"Content-Type": "application/json",
},
});
const resultData = await userData.json();
setUserResultData(resultData.data);
})();
}, []);
문제는 useEffect 안에서, userId 가 생성되지 않는다.
정확히는 useEffect 실행 후, useSession에서 받아온 userId 가 페이지에서 받아와진다.
따라서, useEffect안에서 실행되는 fetch 에는 body 값에 undefined 가 참조되고, fetch가 정상적으로 이루어지지않는다.
이는 next-auth 의 실행이 렌더 이후에, (useEffect 의 초기 렌더후 실행되는 콜백함수의 실행 보다도 더)
이루어 지므로, 해당 값이 제대로 들어가지 않음을 의미했다.
따라서 useEffect 의존성배열에 props 값을 넣어 해결했다.
...
const resultData = await userData.json();
setUserResultData(resultData.data);
})();
}, [userId]);
간단한 해결방법이고 간단한 오류지만, next-auth 의 값을 가져오는 시기를 알 수 있는 오류라 정리해보았다.
'오류 > Next.js' 카테고리의 다른 글
1. ReferenceError: window is not defined (0) | 2023.02.04 |
---|
댓글