首页 > 解决方案 > 显示嵌套数组项反应原生

问题描述

我有很多评论和他们的回复,如下所示:

[
    {
        commentId: "5efd85d5b2eff7063b8ec802",
        description: "some comment description",
        isAnonymous: false,
        createdAt: "2020-07-02T06:59:33.317Z",
        currentUserLiked: 0,
        likes: 0,
        user: {
            firstName: "ar",
            lastName: "ar",
            email: "test@email.com",
            username: "sami",
            isVerified: false,
        },
        children: [
            {
                commentId: "5efd86b7b2eff7063b8ec803",
                parentId: "5efd85d5b2eff7063b8ec802",
                description: "some comment description",
                isAnonymous: false,
                createdAt: "2020-07-02T07:03:19.405Z",
                currentUserLiked: 0,
                likes: 0,
                user: {
                    firstName: "ar",
                    lastName: "ar",
                    email: "test@email.com",
                    username: "sami",
                    isVerified: false,
                },
                children: [
                    {
                        commentId: "5efd89c4b2eff7063b8ec805",
                        parentId: "5efd86b7b2eff7063b8ec803",
                        description: "Child of Child",
                        isAnonymous: false,
                        createdAt: "2020-07-02T07:16:20.717Z",
                        currentUserLiked: 0,
                        likes: 0,
                        user: {
                            firstName: "ar",
                            lastName: "ar",
                            email: "test@email.com",
                            username: "sami",
                            isVerified: false,
                        },
                        children: [],
                    },
                ],
            },
            {
                commentId: "5efd8996b2eff7063b8ec804",
                parentId: "5efd85d5b2eff7063b8ec802",
                description: "Child of Child",
                isAnonymous: false,
                createdAt: "2020-07-02T07:15:34.341Z",
                currentUserLiked: 0,
                likes: 0,
                user: {
                    firstName: "ar",
                    lastName: "ar",
                    email: "test@email.com",
                    username: "sami",
                    isVerified: false,
                },
                children: [],
            },
        ],
    },
];

我想将它们显示为同一级别的所有孩子,以使用 flatList 进行本机反应。

我怎样才能做到这一点?

标签: javascriptarraysreact-nativereact-native-flatlist

解决方案


我理解正确吗?:

const comments = [{id: 1, children: [{id: 2, children: [{id: 3, children:[]}]}]}];

const flatComments = (list) => {
    return list.flatMap(el => {
        const {children, ...out} = el;
        return [out, ...flatComments(children)];
    });
};

flatComments(comments);

// [{id: 1}, {id: 2}, {id: 3}];

推荐阅读