Likers 관련 에러 혼자해결해보려고햇지만 결국 안되네요

Question

제로초님 바쁘신데 항상 감사합니다. 커뮤니티 다른 유사한 질문들 보면서 해결해보려고 했는데 저는 안되네요, 강의 그대로 따라하는데 비스한 오류같은데 어디서 잘못된걸까요 도와주세요..

프론트앤드서버쪽 콘솔입니다

Warning: MenuItem should not leave undefined `key`.

3. getProps after dispatches has store state {

user: {

loadMyInfoLoading: false,

loadMyInfoDone: true,

loadMyInfoError: null,

loadUserLoading: false,

loadUserDone: false,

loadUserError: null,

followLoading: false,

followDone: false,

followError: null,

unfollowLoading: false,

unfollowDone: false,

unfollowError: null,

logInLoading: false,

logInDone: false,

logInError: null,

logOutLoading: false,

logOutDone: false,

logOutError: null,

signUpLoading: false,

signUpDone: false,

signUpError: null,

changeNicknameLoading: false,

changeNicknameDone: false,

changeNicknameError: null,

loadFollowingsLoading: false,

loadFollowingsDone: false,

loadFollowingsError: null,

loadFollowersLoading: false,

loadFollowersDone: false,

loadFollowersError: null,

removeFollowerLoading: false,

removeFollowerDone: false,

removeFollowerError: null,

me: null,

userInfo: null

},

post: {

mainPosts: [

[Object], [Object],

[Object], [Object]

],

singlePost: null,

imagePaths: [],

hasMorePosts: true,

likePostLoading: false,

likePostDone: false,

likePostError: null,

unlikePostLoading: false,

unlikePostDone: false,

unlikePostError: null,

loadPostLoading: false,

loadPostDone: false,

loadPostError: null,

loadPostsLoading: false,

loadPostsDone: true,

loadPostsError: null,

addPostLoading: false,

addPostDone: false,

addPostError: null,

removePostLoading: false,

removePostDone: false,

removePostError: null,

addCommentLoading: false,

addCommentDone: false,

addCommentError: null,

uploadImagesLoading: false,

uploadImagesDone: false,

uploadImagesError: null,

retweetLoading: false,

retweetDone: false,

retweetError: null

}

{}

4. WrappedApp created new store with withRedux(AvoCode) {

initialState: undefined,

initialStateFromGSPorGSSR: {

user: {

loadMyInfoLoading: false,

loadMyInfoDone: true,

loadMyInfoError: null,

loadUserLoading: false,

loadUserDone: false,

loadUserError: null,

followLoading: false,

followDone: false,

followError: null,

unfollowLoading: false,

unfollowDone: false,

unfollowError: null,

logInLoading: false,

logInDone: false,

logInError: null,

logOutLoading: false,

logOutDone: false,

logOutError: null,

signUpLoading: false,

signUpDone: false,

signUpError: null,

changeNicknameLoading: false,

changeNicknameDone: false,

changeNicknameError: null,

loadFollowingsLoading: false,

loadFollowingsDone: false,

loadFollowingsError: null,

loadFollowersLoading: false,

loadFollowersDone: false,

loadFollowersError: null,

removeFollowerLoading: false,

removeFollowerDone: false,

removeFollowerError: null,

me: null,

userInfo: null

},

post: {

mainPosts: [Array],

singlePost: null,

imagePaths: [],

hasMorePosts: true,

likePostLoading: false,

likePostDone: false,

likePostError: null,

unlikePostLoading: false,

unlikePostDone: false,

unlikePostError: null,

loadPostLoading: false,

loadPostDone: false,

loadPostError: null,

loadPostsLoading: false,

loadPostsDone: true,

loadPostsError: null,

addPostLoading: false,

addPostDone: false,

addPostError: null,

removePostLoading: false,

removePostDone: false,

removePostError: null,

addCommentLoading: false,

addCommentDone: false,

addCommentError: null,

uploadImagesLoading: false,

uploadImagesDone: false,

uploadImagesError: null,

retweetLoading: false,

retweetDone: false,

retweetError: null

}

HYDRATE {

type: '__NEXT_REDUX_WRAPPER_HYDRATE__',

payload: {

user: {

loadMyInfoLoading: false,

loadMyInfoDone: true,

loadMyInfoError: null,

loadUserLoading: false,

loadUserDone: false,

loadUserError: null,

followLoading: false,

followDone: false,

followError: null,

unfollowLoading: false,

unfollowDone: false,

unfollowError: null,

logInLoading: false,

logInDone: false,

logInError: null,

logOutLoading: false,

logOutDone: false,

logOutError: null,

signUpLoading: false,

signUpDone: false,

signUpError: null,

changeNicknameLoading: false,

changeNicknameDone: false,

changeNicknameError: null,

loadFollowingsLoading: false,

loadFollowingsDone: false,

loadFollowingsError: null,

loadFollowersLoading: false,

loadFollowersDone: false,

loadFollowersError: null,

removeFollowerLoading: false,

removeFollowerDone: false,

removeFollowerError: null,

me: null,

userInfo: null

},

post: {

mainPosts: [Array],

singlePost: null,

imagePaths: [],

hasMorePosts: true,

likePostLoading: false,

likePostDone: false,

likePostError: null,

unlikePostLoading: false,

unlikePostDone: false,

unlikePostError: null,

loadPostLoading: false,

loadPostDone: false,

loadPostError: null,

loadPostsLoading: false,

loadPostsDone: true,

loadPostsError: null,

addPostLoading: false,

addPostDone: false,

addPostError: null,

removePostLoading: false,

removePostDone: false,

removePostError: null,

addCommentLoading: false,

addCommentDone: false,

addCommentError: null,

uploadImagesLoading: false,

uploadImagesDone: false,

uploadImagesError: null,

retweetLoading: false,

retweetDone: false,

retweetError: null

}

error - components\PostCard.js (70:21) @ PostCard

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

68 | }, [id]);

69 |

> 70 | const liked = post.Likers.find((v) => v.id === id);

| ^

71 | return (

72 | <div style={{ marginBottom: 20 }}>

73 | <Card

error - components\PostCard.js (70:21) @ PostCard

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

68 | }, [id]);

69 |

> 70 | const liked = post.Likers.find((v) => v.id === id);

| ^

71 | return (

72 | <div style={{ marginBottom: 20 }}>

------------------------------------------------

여기는 back> routes> post.js router.get 관련코드입니다.

router.get('/:postId/', async (req, res, next) => { // GET / post/1
  try {
    const post = await Post.findOne({
      where: { id: req.params.postId },
    });
    if (!post) {
      return res.status(404).send('존재하지 않는 게시글입니다.');
    }
    const fullPost = await Post.findOne({
      where: { id: post.id },
      include: [{
        model: Post,
        as: 'Retweet',
        include: [{
          model: User,
          attributes: ['id', 'nickname'],
        }, {
          model: Image,
        }]
      }, {
        model: User,
        attributes: ['id', 'nickname'],
      }, {
        model: User,
        as: 'Likers',
        attributes: ['id', 'nickname'],
      }, {
        model: Image,
      }, {
        model: Comment,
        include: [{
          model: User,
          attributes: ['id', 'nickname'],
        }]
      },{
        model: User,
        as: 'Likers',
        attributes: ['id'],
      }],
    });
    res.status(200).json(fullPost);
  } catch(error) {
    console.error(error);
    next(error);
  }
});

73 | 70 | const liked = post.Likers.find((v) => v.id === id); | ^ 71 | return ( 72 |

------------------------------------------------ 여기는 back> routes> post.js router.get 관련코드입니다. router.get('/:postId/', async (req, res, next) => { // GET / post/1 try { const post = await Post.findOne({ where: { id: req.params.postId }, }); if (!post) { return res.status(404).send('존재하지 않는 게시글입니다.'); } const fullPost = await Post.findOne({ where: { id: post.id }, include: [{ model: Post, as: 'Retweet', include: [{ model: User, attributes: ['id', 'nickname'], }, { model: Image, }] }, { model: User, attributes: ['id', 'nickname'], }, { model: User, as: 'Likers', attributes: ['id', 'nickname'], }, { model: Image, }, { model: Comment, include: [{ model: User, attributes: ['id', 'nickname'], }] },{ model: User, as: 'Likers', attributes: ['id'], }], }); res.status(200).json(fullPost); } catch(error) { console.error(error); next(error); } });

Answer

지나가다 혹시 몰라서 댓글 남겨요

저같은 경우에는 front saga에서 url 경로를 실수로 `posts/${data}`라고 적어놨더라고요 `post/${data}`로 바꿔주니 해결됐어요

Trendy Tube

Likers 관련 에러 혼자해결해보려고햇지만 결국 안되네요

이 글과 비슷한 Q&A

onClickRedo 질문

화면이 안보여요

export const dynamic = "force-dynamic"이 적용된 page.tsx는 모든 요청을 캐싱하지 않는다?

페이지이동후 쿼리 질문있습니다