• 카테고리

    질문 & 답변
  • 세부 분야

    풀스택

  • 해결 여부

    미해결

리액트 섹션2 게시글 구현하기 강의를 듣는 중에 'TypeError: 정의되지 않은 속성 'me'을 읽을 수 없습니다.' 에러가 발생하였습니다.

23.06.08 20:01 작성 조회수 246

0

Cannot read property 'me' of undefined 에러가 났는데 원인을 모르겠어서 질문드립니다.
에러로 추정되는 코드 파일(PostCard.js, user.js, post.js)을 함께 첨부합니다.

에러me.PNG

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

에러메시지에서 89:34 줄이라고 나와있는 걸 눌러보면 에러 위치가 나옵니다