popover

안녕하세요 제로초님...예제를 조금 변형해 PostCard 를 만드는 작업을 하는 도중에 문제가 생겨서 남깁니다.

기존 action요소 에 있던  <EllipsisOutlined />를

extra로 옮기면서 작업하는 도중에 Popover를 사용할 경우에

무한 콜스택으로 들어가는 문제가 생겼습니다. ㅜㅜ

그래서 Popover를 감싸지 않고  <EllipsisOutlined />를 사용해서 onClick으로 출력 해준 결과에는 잘 작동하는 것을 보였습니다. 어떤게 문제인가요? ㅜㅜPopover가 제가 모르는 다른 call을하는건지

1번코드 사진

2번코드 사진

//1번째 코드

import react, { useState, useCallback } from 'react';
import { Card, Popover, Button, List, Comment, Avatar, Skeleton } from 'antd';
import { useSelector } from 'react-redux';
import { RetweetOutlined, HeartOutlined, MessageOutlined, ShareAltOutlined, EllipsisOutlined } from '@ant-design/icons';
import PostImage from './PostImage';
import CommentForm from './CommentForm';
import PropTypes from 'prop-types';
const POSTCARD = ({ post }) => {
    console.log(post.User.id);
    const { me } = useSelector(state => state.user);
    const [commentOpen, setCommentOpened] = useState(false);
    const id = me && me.id;
    console.log(me);
    console.log(id);

    const onClickRetWeet = useCallback(
        () => {

        },
        [],
    )

    const onClickHeart = useCallback(
        () => {

        },
        [],
    )

    const onClickComment = useCallback(
        () => {
            setCommentOpened((pre) => (!pre));
        },
        [],
    )

    const onClickShared = useCallback(
        () => {

        },
        [],
    )

    const onClickmore = useCallback(
        () => {
            console.log("click more");
        },
        [],
    )

    return (
        <>
            <Card
                cover={post.Images[0] && <PostImage images={post.Images} />}

                actions={[
                    <RetweetOutlined key="retweet" onClick={onClickRetWeet} />,
                    <HeartOutlined key="edit" onClick={onClickHeart} />,
                    <MessageOutlined key="message" onClick={onClickComment} />,
                    <ShareAltOutlined key="shared" onClick={onClickShared} />,

                ]}
                extra={
                    // <Popover trigger="click"

                    //     content={(
                    //         <Button.Group>
                    //             {id && id === post.User.id ?
                    //                 <> <Button>수정</Button> <Button>삭제</Button></>
                    //                 :
                    //                 <>< Button>신고 </Button></>}
                    //         </Button.Group>
                    //     )}
                    // >
                    //     <EllipsisOutlined />
                    // </Popover>}
                    <EllipsisOutlined  onClick={onClickmore}/>
                }

            >

                <Card.Meta
                    avatar={<Avatar>{post.User.nickname[0]}</Avatar>}
                    title={post.User.nickname}
                    description={post.content}
                />
            </Card >
            {commentOpen && (

                <>
                    <Card >
                        <CommentForm post={post} />
                        <List style={{ marginTop: "20px" }}
                            header={`${post.Comments.length}개의 댓글`}
                            itemLayout="horizontal"
                            dataSource={post.Comments}
                            renderItem={item => (
                                <List.Item
                                    actions={[<a key="list-loadmore-edit">edit</a>, <a key="list-loadmore-more">more</a>]}
                                >
                                    <Skeleton avatar title={false} loading={item.loading} active>
                                        <List.Item.Meta
                                            avatar={
                                                <Avatar>{item.User.nickname[0]}</Avatar>
                                            }
                                            title={item.User.nickname}
                                            description={item.content}
                                        />
                                    </Skeleton>
                                </List.Item>
                            )}
                        />


                    </Card>


                </>

            )}



        </>


    )

}
POSTCARD.PropTypes = {

    post:PropTypes.shape({
        id: PropTypes.number,
        User: PropTypes.object,
        Comments: PropTypes.arrayOf(PropTypes.any),
        content: PropTypes.string,
        Images: PropTypes.arrayOf(PropTypes.any),
        imagePaths: PropTypes.arrayOf(PropTypes.any)


    })
   
}

export default POSTCARD;


////2번째 코드

import react, { useState, useCallback } from 'react';
import { Card, Popover, Button, List, Comment, Avatar, Skeleton } from 'antd';
import { useSelector } from 'react-redux';
import { RetweetOutlined, HeartOutlined, MessageOutlined, ShareAltOutlined, EllipsisOutlined } from '@ant-design/icons';
import PostImage from './PostImage';
import CommentForm from './CommentForm';
import PropTypes from 'prop-types';
const POSTCARD = ({ post }) => {
    console.log(post.User.id);
    const { me } = useSelector(state => state.user);
    const [commentOpen, setCommentOpened] = useState(false);
    const id = me && me.id;
    console.log(me);
    console.log(id);

    const onClickRetWeet = useCallback(
        () => {

        },
        [],
    )

    const onClickHeart = useCallback(
        () => {

        },
        [],
    )

    const onClickComment = useCallback(
        () => {
            setCommentOpened((pre) => (!pre));
        },
        [],
    )

    const onClickShared = useCallback(
        () => {

        },
        [],
    )

    // const onClickmore = useCallback(
    //     () => {
    //         console.log("click more");
    //     },
    //     [],
    // )

    return (
        <>
            <Card
                cover={post.Images[0] && <PostImage images={post.Images} />}

                actions={[
                    <RetweetOutlined key="retweet" onClick={onClickRetWeet} />,
                    <HeartOutlined key="edit" onClick={onClickHeart} />,
                    <MessageOutlined key="message" onClick={onClickComment} />,
                    <ShareAltOutlined key="shared" onClick={onClickShared} />,

                ]}
                extra={
                    <Popover trigger="click"

                        content={(
                            <Button.Group>
                                {id && id === post.User.id ?
                                    <> <Button>수정</Button> <Button>삭제</Button></>
                                    :
                                    <>< Button>신고 </Button></>}
                            </Button.Group>
                        )}
                    >
                        <EllipsisOutlined />
                    </Popover>}


            >

                <Card.Meta
                    avatar={<Avatar>{post.User.nickname[0]}</Avatar>}
                    title={post.User.nickname}
                    description={post.content}
                />
            </Card >
            {commentOpen && (

                <>
                    <Card >
                        <CommentForm post={post} />
                        <List style={{ marginTop: "20px" }}
                            header={`${post.Comments.length}개의 댓글`}
                            itemLayout="horizontal"
                            dataSource={post.Comments}
                            renderItem={item => (
                                <List.Item
                                    actions={[<a key="list-loadmore-edit">edit</a>, <a key="list-loadmore-more">more</a>]}
                                >
                                    <Skeleton avatar title={false} loading={item.loading} active>
                                        <List.Item.Meta
                                            avatar={
                                                <Avatar>{item.User.nickname[0]}</Avatar>
                                            }
                                            title={item.User.nickname}
                                            description={item.content}
                                        />
                                    </Skeleton>
                                </List.Item>
                            )}
                        />


                    </Card>


                </>

            )}



        </>


    )

}
POSTCARD.PropTypes = {

    post:PropTypes.shape({
        id: PropTypes.number,
        User: PropTypes.object,
        Comments: PropTypes.arrayOf(PropTypes.any),
        content: PropTypes.string,
        Images: PropTypes.arrayOf(PropTypes.any),
        imagePaths: PropTypes.arrayOf(PropTypes.any)


    })
   
}

export default POSTCARD;