ant design Comment组件使用递归问题

Question

目标：我想展示多级评论
环境：react+ts
问题：我现在写了下面的一个递归函数，但是报错"Maximum call stack size exceeded"

const createTree = (comment: TC, children?: any) => {
    if (comment.children) {
        comment.children.forEach((item: TC) => {
            createTree(comment, createTree(item));
        });
        return <Comment
            content={comment.content}
            datetime={comment.date}>
            {children}
        </Comment>
    } else {
        return <Comment
            content={comment.content}
            datetime={comment.date}>
            {children}
        </Comment>
    }
};

数据是这样的：

[
    {
        "id": 210709333,
        "topic_id": 6,
        "topic_type": "Javascript",
        "content": "promise",
        "from_uid": 2,
        "to_uid": null,
        "date": "2021-07-08T16:00:00.000Z",
        children: [{
            "id": 210709334,
            "topic_id": 6,
            "topic_type": "Javascript",
            "content": "promise3",
            "from_uid": 3,
            "to_uid": 2,
            "date": "2021-07-08T16:00:00.000Z"
        }]
    },
    {
        "id": 210709335,
        "topic_id": 6,
        "topic_type": "Javascript",
        "content": "promise4",
        "from_uid": 3,
        "to_uid": null,
        "date": "2021-07-08T16:00:00.000Z"
    }
];

Answer 1

页面渲染得用有返回值的数组方法。比如map来渲染。

代码如下

const data = [
            {
                id: 210709333,
                topic_id: 6,
                topic_type: 'Javascript',
                content: 'promise',
                from_uid: 2,
                to_uid: '',
                date: '2021-07-08T16:00:00.000Z',
                children: [
                    {
                        id: 210709334,
                        topic_id: 6,
                        topic_type: 'Javascript',
                        content: 'promise3',
                        from_uid: 3,
                        to_uid: 2,
                        date: '2021-07-08T16:00:00.000Z'
                    }
                ]
            },
            {
                id: 210709335,
                topic_id: 6,
                topic_type: 'Javascript',
                content: 'promise4',
                from_uid: 3,
                to_uid: '',
                date: '2021-07-08T16:00:00.000Z'
            }
        ];

function loadComments(data: any): React.ReactNode {
            return data.map((item: any) => {
                return <div>{item.content} <div className="m-l-5">{item.children && item.children.length && loadComments(item.children)}</div></div>;
            });
        }

页面上直接这样就好

{loadComments(data)}

渲染效果