velopert
[개정판] p859, 26장 PostItem username의 undefined 오류
새로 업데이트 된 내용에 따라서
const PostListContainer = ({ location, match }) => {
const dispatch = useDispatch();
const { posts, error, loading, user } = useSelector(
({ posts, loading, user }) => ({
posts: posts.posts,
error: posts.error,
loading: loading['posts/LIST_POSTS'],
user: user.user,
}),
);
useEffect(() => {
const { username } = match.params;
const { tag, page } = qs.parse(location.search, {
ignoreQueryPrefix: true,
});
dispatch(listPosts({ tag, username, page }));
}, [dispatch, location.search,match.params]);
라고 수정했지만 여전히 username undefined이라고 나옵니다.. 코드 작성 중 오류일수도 있어서 velopert님이 올려주신 코드를 그대로 복사하여 실행해보아도 같은 문제로 오류가 나네요. 어떤것이 문제인지 알려주실수 있나요?
lib/api/posts.js
export const listPosts = ({ page, username, tags }) => {
const queryString = qs.stringify({ page, username, tags });
return client.get(`/api/posts?${queryString}`);
};
containers/posts/PostListContainer.js
useEffect(() => {
const { tag, username, page } = qs.parse(location.search, {
ignoreQueryPrefix: true,
});
dispatch(listPosts({ tag, username, page }));
}, [dispatch, location.search]);
책에 있는 코드대로 작성하면 웹이 잘 작동하나요? 저도 처음에 Neo 님이 올려주신 코드대로 작성했었는데 계속 username을 찾을 수 없다고 나오더라구요... 그래서 오탈자인가 찾아보니 https://github.com/velopert/learning-react/blob/master/corrections.md#2622-pg-857---858-%EC%8B%A4%EC%88%98 여기에 오탈자라고 써있어서 수정된 코드대로 작성했지만 여전히 username을 찾을수가 없다고 한네요... ㅠㅠㅠ
App.js 에
<Route component={PostListPage} path={['/@:username', '/']} exact />
이렇게 잘 설정되어 있는지 확인해주세요.
주소창에
https://localhost:3000/@username 과 같은 형태의 주소로 입력되어있는지 확인해주세요.
답변 주셔서 감사합니다! 코드를 다시 확인했는데 언급해주신것처럼 되어있었습니다. 그런데 아직 이렇게 오류가 발생하네요....
그런데 PostView에서 post id 값만 동일하면 요청한 username과 post의 username과 달라도 해당 포스트를 보여주는데.. 혹시 이 오류와 저 오류가 관련있는 걸까요?
해당 이슈는 PostItem 에서 사용하는 포스트 객체네 user 값이 없어서 그런건데요,
한번 PostItem 에서 post 객체를 콘솔에 출력해보세요. user 객체가 있나요?
아마 백엔드 쪽에 문제가 있지 않을까 싶은데, 문제가 잘 파악되지 않는다면
Github에 레포 올려서 링크 주시면 한번 확인해볼게요~
velopert 님 말씀대로 백앤드 코드를 살펴보니 그 쪽에 문제가 있었습니다!! 프론트쪽의 오류인줄 알고 계속 프론트 코드만 검토하고있었는데 백앤드 문제였네요 ... 감사합니다!!!! correction에 올려져있는대로 수정하면 제대로 작동합니다!!
velopert 님 말씀대로 백앤드 코드를 살펴보니 그 쪽에 문제가 있었습니다!! 프론트쪽의 오류인줄 알고 계속 프론트 코드만 검토하고있었는데 백앤드 문제였네요 ... 감사합니다!!!! correction에 올려져있는대로 수정하면 제대로 작동합니다!!
안녕하세요. 같은 문제로 고생중인데 ㅠ 혹시 어떻게 해결하셨는지 여쭤봐도 될까요?
App.js 에
<Route component={PostListPage} path={['/@:username', '/']} exact />
이렇게 잘 설정되어 있는지 확인해주세요.
주소창에
https://localhost:3000/@username 과 같은 형태의 주소로 입력되어있는지 확인해주세요.
안녕하세요 velopert 님, 저도 같은 문제로 고생중인데요 ㅠㅠ App.js 에는 문제 없이 코드를 작성했는데 주소형태가 https://localhost:3000/@username 가 아닌 https://localhost:3000/ 로 나타납니다 ㅠㅠ 그리고 user 값이 없다는 저 오류가 뜨고요.. 혹시 어떻게 해결하는지 알 수 있을까요 ㅠㅠ?
아마 개인적인 생각으로는
앞 절에서 blog-backend 를 생성하면서 디비 커넥될때마다 API를 가져오는 코드가 있었는데
그 코드가 현재도 실행중이거나, 과거에 데이터가 쌓여있어서 같이 조회되는 경우라고 생각되네요
과거에 DB에 연습으로 넣어놨던 데이터가 문제였네요. 그 데이터에는 username값이 없어서 오류 난 것 같습니다. 저도 DB에 연습으로 넣어놨던 데이터 삭제했더니 해결 됐습니다
