Javascript 如何在React CLI（评论列表和回复列表）中使用映射和过滤器在另一个列表中列出数据

我有一个简单的评论列表，在这里我可以列出所有评论，但我需要的是通过匹配commentId在其中列出它的子（回复）列表。这是我正在使用的代码

类注释扩展组件{
建造师（道具）{
超级（道具）；
此.state={
博客列表：{}，
评论列表：[{“id”：“1”，“post_id”：“1”，“username”：“Rovan”，“content”：“Wow”，“avatar”：“created_on”：“2020-01-16”，“updated_on”：“null}，{“id”：“2”，“post_id”：“1”，“username”：“Ravan”，“content”：“Wooow！”，“avatar”：“created_on”：“2020-01-16”，“updated_on”：“null}，{“id”：“4”，“post_id”：“1”，“username”：“Ravan V”，“content”：“Yes Ram”，“avatar”：“created_on”：“avatar”：“2020-01-19”，“更新日期”：null}，{“id”：“5”，“发布id”：“1”，“用户名”：“Ravan V”，“内容”：“是的Ram”，“化身”：“创建日期”：“2020-01-19”，“更新日期”：null}]，
回复列表：[{“id”：“1”，“评论id”：“1”，“帖子id”：“1”，“用户名”：“山姆”，“内容”：“哇”，“阿凡达”：“创建日期”：“2020-01-15”，“updtaed_on”：null}，{“id”：“2”，“评论id”：“1”，“帖子id”：“1”，“用户名”：“罗恩”，“内容”：“是的！是的！”，“阿凡达”：“创建日期”：“2020-01-14”，“updtaed_on”：“null}，{“id”：“用户名”：“3”，“评论id”2，“帖子id”：“山姆”，“内容”：“Sam哇，“阿凡达”：“创建日期”：“2020-01-15”，“升级日期”：空}]
};
}
render（）{
const{commentList}=this.state；
const{ReplyList}=this.state；
const replyIterationMap=（id）=>{
ReplyList.filter（c=>c.comment\u id==id）.map（（项，索引）=>）
{item.username.substring（0，1.toUpperCase（）}
{item.username}
{item.created_on}
{item.content}


))};
const commentIterationMap=commentList.map（（项目，索引）=>(
{item.username.substring（0，1.toUpperCase（）}
{item.username}
{item.created_on}
{item.content}


{replyIterationMap（item.id）}
));
返回(
{commentIterationMap}
);}
}
导出默认注释；

我想通过标记这些评论来获得所有评论和相应的回复。 如下图所示

---

我尝试了上面的代码，但它对我不起作用，我需要列出这些注释并回复上面的图像

在

渲染

方法中，您没有调用

注释迭代映射

方法。另外，在

回复迭代映射

中，您没有返回回复的JSX

此外，我将

commentIterationMap

和

replyIterationMap

方法声明为类的方法（而不是在render方法中定义它们）。我还将以不同的方式调用它们（

renderComments

和

renderReplies

），请注意，他们负责呈现JSX的某些部分

考虑到所有这些因素，代码如下所示：

class comments extends Component {
    constructor(props) {
        super(props);
        this.state = {
            blogList: {},
            commentList: [{ 
                "id":"1",




   "post_id":"1",
"username":"Rovan","content":"Wow","avatar":"","created_on":"2020-01-16","updated_on":null
},{"id":"2","post_id":"1","username":"Ravan","content":"Woooow!","avatar":"","created_on":"2020-01-16","updated_on":null},{"id":"4","post_id":"1","username":"Ravan V","content":"Yes Ram","avatar":"","created_on":"2020-01-19","updated_on":null},{"id":"5","post_id":"1","username":"Ravan V","content":"Yes Ram","avatar":"","created_on":"2020-01-19","updated_on":null}],
          ReplyList: [{"id":"1","comment_id":"1","post_id":"1","username":"Sam","content":"wow","avatar":"","created_on":"2020-01-15","updtaed_on":null},{"id":"2","comment_id":"1","post_id":"1","username":"Ron","content":"Yes! Yes!","avatar":"","created_on":"2020-01-14","updtaed_on":null},{"id":"3","comment_id":"2","post_id":"1","username":"Sam","content":"wow","avatar":"","created_on":"2020-01-15","updtaed_on":null}]
        };
    }

    renderReplies(commentId) {
        return this.state.ReplyList
            .filter(c => c.comment_id === commentId)
            .map((item, index) => ( 
                <div className="media d-block d-md-flex mt-3" key={index}>
                    <div
                        className={
                            Style.avatar +
                            " " +
                            this.AvatarColorChange(item.username.substring(0, 1))
                        }
                    >
                        <h2 className="text-center pt-1 mt-md-1 mt-sm-2 mt-lg-1">
                            {item.username.substring(0, 1).toUpperCase()}
                        </h2>
                    </div>
                    <div className="media-body text-center text-md-left ml-md-3 ml-0">
                        <h5 className="mt-0 font-weight-bold">
                            {item.username}
                            <span
                                className={
                                    Style.relativeDate + " float-right font-weight-lighter"
                                }
                            >
                                <Moment format="MMM 'DD">{item.created_on}</Moment>
                            </span>
                        </h5>
                        <p>{item.content}</p>

                        <hr />
                    </div>
                </div>
            ));
    }

    renderComments() {
        return this.state.commentList.map((item, index) => (
            <div
                className={Style.comments + " media d-block d-md-flex mt-4"}
                key={index.toString()}
            >
                <div
                    className={
                        Style.avatar +
                        " " +
                        this.AvatarColorChange(item.username.substring(0, 1))
                    }
                >
                    <h2 className="text-center pt-1 mt-md-1 mt-sm-2 mt-lg-1">
                        {item.username.substring(0, 1).toUpperCase()}
                    </h2>
                </div>
                <div className="media-body text-center text-md-left ml-md-3 ml-0">
                    <h5 className="font-weight-bold">
                        {item.username}
                        <span
                            className={
                                Style.relativeDate + "  float-right font-weight-lighter"
                            }
                        >
                            <Moment format="MMM DD">{item.created_on}</Moment>
                        </span>
                    </h5>
                    <p>{item.content} </p>

                    <div className="text-right pt-1">
                        <a href="#i" id="reply">
                            Replay
                        </a>
                    </div>
                    <hr />
                    {this.replyIterationMap(item.id)}

                </div>
            </div>
        ));
    }

    render() {
        return (
            <div className="comments">
                {this.commentIterationMap()}
            </div>
        );
    }
}
export default comments;

类注释扩展组件{
建造师（道具）{
超级（道具）；
此.state={
博客列表：{}，
评论列表：[{
“id”：“1”，
“post_id”：“1”，
“用户名”：“Rovan”，“内容”：“哇”，“阿凡达”：“创建日期”：“2020-01-16”，“更新日期”：空
}，{“id”：“2”，“post_id”：“1”，“用户名”：“Ravan”，“内容”：“Wooow！”，“avatar”：“created_on”：“2020-01-16”，“updated_on”：null}，{“id”：“4”，“post_id”：“1”，“用户名”：“Ravan V”，“内容”：“Yes Ram”，“avatar”：“created_on”：“2020-01-19”，“updated_on”：“null}，{“id”：“5”，“post_id”：“1”，“用户名”：“Ravan V”，“内容”：“Yes Ram”，“avatar”：“created_on”；“avatar”；“2020-01-19”更新了“：null}]，
回复列表：[{“id”：“1”，“评论id”：“1”，“帖子id”：“1”，“用户名”：“山姆”，“内容”：“哇”，“阿凡达”：“创建日期”：“2020-01-15”，“updtaed_on”：null}，{“id”：“2”，“评论id”：“1”，“帖子id”：“1”，“用户名”：“罗恩”，“内容”：“是的！是的！”，“阿凡达”：“创建日期”：“2020-01-14”，“updtaed_on”：“null}，{“id”：“用户名”：“3”，“评论id”2，“帖子id”：“山姆”，“内容”：“Sam哇，“阿凡达”：“创建日期”：“2020-01-15”，“升级日期”：空}]
};
}
renderReplies（commentId）{
返回此.state.ReplyList
.filter（c=>c.comment\u id===commentId）
.map（（项目、索引）=>（
{item.username.substring（0，1.toUpperCase（）}
{item.username}
{item.created_on}
{item.content}


));
}
renderComments（）{
返回此.state.commentList.map（（项，索引）=>(
{item.username.substring（0，1.toUpperCase（）}
{item.username}
{item.created_on}
{item.content}


{this.replyIterationMap（item.id）}
));
}
render（）{
返回(
{this.commentIterationMap（）}
);
}
}
导出默认注释；

此方法也适用于它

类注释扩展React.Com