[2024.01.10] TypeError : useInfiniteQuery 시도 중 ...

[55555-Jyeon]

🔴 useInfiniteQuery 적용하면서 다양한 type error 만나는 중

useQuery 에서 useInfiniteQuery 로 바꾸는 과정에서 pageParam을 추가했는데..

{ pageParam = 1 } 👉 이 부분이 문제인가 싶은데, 이 부분 추가할 때 에러가 발생, 어떻게 수정을 해 나가야 할지 고민이다.

아래는 postList && 적용 돼 있는데도 이래서 뭐 때문인지.. 👀

일단 console.log( ) 줄마다 찍어보면서 디버깅 해보는 수 밖에 없지..! 🥲

[55555-Jyeon]

디버깅 후 문제됐던 코드들 조금씩 수정해서 console.log()에 드디어 page의 값이 찍혔다.

근데... ? 👀

page도 post도 둘 다 잘 찍히는데 왜... ? 👀

[55555-Jyeon]

post[0].User.nickName ➡️ 에러도 렌더도 안 됨 post.User.nickName ➡️ TypeError: Cannot read properties of undefined (reading 'nickName') User.nickName ➡️ User is not defined

왜 에러도 없고 컴포넌트도 없어... 🥲 둘 중 하난 띄워줘야지..

[55555-Jyeon]

🟢 solved

post 도 잘 뜨는데 map을 하고 있는 onePost 를 지우고 <div>{post.User.nickName}</div> 을 해봐도 아무 것도 안 떠서 의아해하던 중 도움을 받아 쉽게 해결할 수 있었다.

두 가지 때문에 화면 렌더가 되지 않았다 :

1. post 의 값이 { ...1} { ...2} { ...3} 또 배열이었던 것
2. pages 를 map 하는 부분에 return이 없었던 것

일반적으로 처음에 내가 작성한대로 pages > post > onePost 순서가 맞긴 한데, msw에서 데이터를 가져오면서 문제가 있었던 건지 post도 map을 해줘야 하는 형태였어서 post도 한 번 더 map을 해주니 잘 떴다.

그리고 처음에 post > onePost만 map 해주다가 무한 스크롤을 적용하면서 pages도 map을 적용하는 등 점점 깊어지면서 코드를 수정함에 따라 return 문 작성을 빼먹었다.

전부 고쳐주니 화면에 정상적으로 렌더되었다!

소괄호로 감싸게 될 경우 return 문이 생략되는 것임을 잊지 말자!