-
카테고리
-
세부 분야
풀스택
-
해결 여부
미해결
PostCard import 오류
23.02.06 18:20 작성 조회수 367
0
import 문제 없어 보이는데 댓글 확인을 누르면 오류 페이지가 뜹니다..
PostCard.js
import React, { useState, useCallback } from 'react';
import { Card, Button, Avatar, Popover, List, Comment } from 'antd';
import PropTypes from 'prop-types';
import { RetweetOutlined, HeartTwoTone, HeartOutlined, MessageOutlined, EllipsisOutlined } from '@ant-design/icons';
import styled from 'styled-components';
import Link from 'next/link';
import { useSelector } from 'react-redux';
import PostImages from './PostImages';
import CommentForm from './CommentForm';
const PostCard = ({post}) => {
const [liked, setLiked] = useState(false);
const [commentFormOpened, setCommentFormOpened] = useState(false);
const id = useSelector((state) => state.user.me && state.user.me.id);
const onToggleLike = useCallback(() => {
setLiked((prev) => !prev);
}, []);
const onToggleComment = useCallback(() => {
setCommentFormOpened((prev) => !prev);
}, []);
return (
<div style={{matginBotton: 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="message" 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>
<CommentForm post={post}/>
<List
header={`${post.Comments.length}개의 댓글`}
itemLayout="horizontal"
dataSource={post.Comments}
renderItem={(item) => (
<li>
<Comment
author={item.User.nickname}
avatar={<Avatar>{item.User.nickname[0]}</Avatar>}
content={item.content}
/>
</li>
)}
/>
</div>
)}
</div>
);
};
PostCard.propTypes = {
post: PropTypes.shape({
id: PropTypes.number,
User: PropTypes.object,
content: PropTypes.string,
createdAt: PropTypes.object,
Comments: PropTypes.arrayOf(PropTypes.any),
Images: PropTypes.arrayOf(PropTypes.any),
}),
};
export default PostCard
답변을 작성해보세요.
0
조현영
지식공유자2023.02.06
일단 이 부분은 주석처리하면서 어떤 부분에서 에러가 발생한건지 확인해보시는 게 좋습니다. jsx 요소들 중 하나가 정상 컴포넌트가 아니라서 그렇습니다.
답변 1