-
카테고리
-
세부 분야
풀스택
-
해결 여부
미해결
리액트 섹션2 게시글 구현하기 강의를 듣는 중에 'TypeError: 정의되지 않은 속성 'me'을 읽을 수 없습니다.' 에러가 발생하였습니다.
23.06.08 20:01 작성 조회수 246
0
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;
영상 잘 보고 있습니다 감사합니다.
답변을 작성해보세요.
0
답변 1