리액트 섹션2 게시글 구현하기 강의를 듣는 중에 'TypeError: 정의되지 않은 속성 'me'을 읽을 수 없습니다.' 에러가 발생하였습니다.
390
작성한 질문수 20
Cannot read property 'me' of undefined 에러가 났는데 원인을 모르겠어서 질문드립니다.
에러로 추정되는 코드 파일(PostCard.js, user.js, post.js)을 함께 첨부합니다.
PostCard.js
import React, { useState, useCallback } from 'react';
import PropTypes from 'prop-types';
import { useSelector } from 'react-redux';
import { Card, Popover, Button, Avatar } from 'antd';
import { RetweetOutlined, HeartOutlined, MessageOutlined,
EllipsisOutLined, HeartTwoTone } from '@ant-design/icons';
import PostImages from './PostImages';
const PostCard = ({ post }) => {
const { user } = useSelector((state) => state.user);
const [liked, setLiked] = useState(false);
const [commentFormOpened, setCommentFormOpened] = useState(false);
const onToggleLike = useCallback(() => {
setLiked((prev) => !prev);
}, []);
const onToggleComment = useCallback(() => {
setCommentFormOpened((prev) => !prev);
}, []);
const id = useSelector((state) => state.User.me?.id);
return (
<div style={{ marginBottom: 20 }}>
<Card
cover={post.Images[0] && <PostImages images={post.Images} />}
actions={[
<RetweetOutlined key="retweet" />,
liked
? <HeartTwoTone twoToneColor="#eb2f96" key="heart" onClick={onToggleLike} />
: <HeartOutlined key="heart" onClick={onToggleLike} />,
< MessageOutlined key="comment" onClick={onToggleComment} />,
<Popover key="more" content={(
<Button.Group>
{id && post.User.id === id
? (
<>
<Button>수정</Button>
<Button type="danger">삭제</Button>
</>
)
: <Button>신고</Button>}
</Button.Group>
)}>
<EllipsisOutLined />
</Popover>,
]}
>
<Card.Meta
avatar={<Avatar>{post.User.nickname[0]}</Avatar>}
title={post.User.nickname}
description={post.content}
/>
</Card>
{commentFormOpened && (
<div>
댓글 부분
</div>)}
{ /* <CommentFrom /> */ }
{ /* <Comment /> */ }
</div>
);
};
PostCard.propTypes = {
post: PropTypes.shape({
id: PropTypes.number,
User: PropTypes.object,
content: PropTypes.string,
createdAt: PropTypes.object,
Comments: PropTypes.arrayOf(PropTypes.object),
Images: PropTypes.arrayOf(PropTypes.object),
}).isRequired,
};
export default PostCard;user.js
export const initialState = {
isLoggedIn: false,
me: null,
signUpData: {},
loginData: {},
}
export const loginAction = (data) => {
return {
type: 'LOG_IN',
data,
}
}
export const logoutAction = (data) => {
return {
type: 'LOG_OUT',
}
}
const reducer = (state = initialState, action) => {
switch (action.type) {
case 'LOG_IN':
return {
...state,
isLoggedIn: true,
me: action.data,.
// },
};
case 'LOG_OUT':
return {
...state,
isLoggedIn: false,
me: null,
};
default:
return state;
}
};
export default reducer;post.js
export const initialState = {
mainPosts: [{
id: 1,
User: {
id: 1,
nickname: 'YeonSeong'
},
content: '첫 번째 게시글 #해시태그 #이모티콘',
Images: [
{ src: 'https://item.kakaocdn.net/do/3b669cd3532e2e97f42dc388d8c29fcb41d1a2caccd0c566eab28b91e2e5d306',},
{ src: 'https://item.kakaocdn.net/do/3b669cd3532e2e97f42dc388d8c29fcb7f9f127ae3ca5dc7f0f6349aebcdb3c4',},
{ src: 'https://item.kakaocdn.net/do/3b669cd3532e2e97f42dc388d8c29fcbb3a18fdf58bc66ec3f4b6084b7d0b570',},
],
Comments: [{
User: {
nickname: 'loveheart',},
content: '우와 강아지가 귀여워요~',
}, {
User: {
nickname: 'starlight',},
content: '얼른 사고 싶어요!',
}]
}],
imagePaths: [],
postAdded: false,
}
const ADD_POST = 'ADD_POST'
export const addPost = {
type: ADD_POST,
}
const dummyPost = {
id: 2,
content: '더미데이터입니다.',
User: {
id: 1,
nickname: '제로초연습',
},
Images: [],
Comments: [],
};
const reducer = (state = initialState, action) => {
switch (action.type) {
case ADD_POST:
return {
...state,
mainPosts: [dummyPost, ...state.mainPosts],
postAdded: true,
};
default:
return state;
}
};
export default reducer;영상 잘 보고 있습니다 감사합니다.
답변 1
넥스트 버젼 질문
0
78
2
로그인시 401 Unauthorized 오류가 뜹니다
0
90
1
무한 스크롤 중 스크롤 튐 현상
0
177
1
특정 페이지 접근을 막고 싶을 때
0
103
2
createGlobalStyle의 위치와 영향범위
0
97
2
인라인 스타일 리렌더링 관련
0
92
2
vsc 에서 npm init 설치시 오류
0
148
2
nextjs 15버전 사용 가능할까요?
0
160
1
화면 새로고침 문의
0
123
1
RTK에서 draft, state 차이가 있나요?
0
155
2
Next 14 사용해도 될까요?
0
452
1
next, node 버전 / 폴더 구조 질문 드립니다.
0
349
1
url 오류 질문있습니다
0
211
1
ssh xxxxx로 우분투에 들어가려니까 port 22: Connection timed out
0
375
1
sudo certbot --nginx 에러
0
1281
2
Minified React error 콘솔에러 (hydrate)
0
470
1
카카오 공유했을 때 이전에 작성했던 글이 나오는 버그
0
248
1
프론트서버 배포 후 EADDRINUSE에러 발생
0
329
1
npm run build 에러
0
519
1
front 서버 npm run build 중에 발생한 에러들
0
383
1
서버 실행하고 브라우저로 들어갔을때 404에러
0
338
2
css 서버사이드 랜더링이 적용되지 않아서 문의 드립니다.
0
289
1
팔로워 3명씩 불러오고 데이터 합쳐주는걸로 바꾸고 서버요청을 무한으로하고있습니다.
0
240
2
해시태그 검색에서 throttle에 관해 질문있습니다.
0
202
1





