Question

我具有以下组件，以显示一组评论（及其回复）。如果注释具有非空的childPosts数组，则将再次使用childPosts的ID调用该组件。可通过props.discussionPosts从redux存储访问所有评论。

import * as React from 'react';
import { useState } from 'react';
import { connect } from 'react-redux';

const CommentItem = (props) => {

    return (
        <div>
            {
                props.commentIds && props.discussionPosts &&
                props.commentIds.map(commentId => {
                    console.log(props.discussionPosts[commentId].childPosts)
                    var ident = 10;
                    return (
                        <div key={commentId} className="comment">
                            <div>{props.discussionPosts[commentId].content}</div>
                            {
                                props.discussionPosts[commentId].childPosts.length > 0  &&
                                <div style={{ marginLeft: '10px'}}>
                                    <CommentItem
                                        key={commentId} 
                                        commentIds={props.discussionPosts[commentId].childPosts}
                                    />
                                </div>
                            }
                        </div>
                    )
                })
            }
        </div>
    )    
}    

const mapStateToProps = (state) => ({
    discussionPosts: state.alignPerspectivesReducer.discussionPosts,
    error: state.alignPerspectivesReducer.error,
    loading: state.alignPerspectivesReducer.loading
})


export default connect(mapStateToProps)(CommentItem);

我使用以下代码将此组件放置在主页中，其中commentIds设置为没有父注释的注释ID。

<CommentItem
      commentIds={props.discussionPosts.filter(function (x) {
                  return props.discussionPosts[x].parentPostId === null;
            })}
/>

但是，该代码仅显示顶级注释，而没有父注释：

Comment 1
Comment 2

我想实现的是这样：

Comment 1
    Reply to c#1
Comment 2
    Reply to c#2

但是，由于某些原因，CommentItem组件内的以下代码无法生成它们：

 <CommentItem
        key={commentId} 
        commentIds={props.discussionPosts[commentId].childPosts}
 />

我能够在控制台中正确打印childPosts值。在图像下方，您可以看到discussionPosts数据的样子：

我没有收到任何错误，但是此递归组件无法正常工作。有帮助吗？

Answer 1

我对redux没有足够的了解，但是如果您使用connect创建一个组件并进行渲染该怎么办？

const CommentItem = (props) => {

    return (
        <div>
            {
                props.commentIds && props.discussionPosts &&
                props.commentIds.map(commentId => {
                    console.log(props.discussionPosts[commentId].childPosts)
                    var ident = 10;
                    return (
                        <div key={commentId} className="comment">
                            <div>{props.discussionPosts[commentId].content}</div>
                            {
                                props.discussionPosts[commentId].childPosts.length > 0  &&
                                <div style={{ marginLeft: '10px'}}>
                                    {// render connected component}
                                    <ConnectedCommentItem 
                                        key={commentId} 
                                        commentIds={props.discussionPosts[commentId].childPosts}
                                    />
                                </div>
                            }
                        </div>
                    )
                })
            }
        </div>
    )    
}    

const mapStateToProps = (state) => ({
    discussionPosts: state.alignPerspectivesReducer.discussionPosts,
    error: state.alignPerspectivesReducer.error,
    loading: state.alignPerspectivesReducer.loading
})

// create connected component
const ConnectedCommentItem = connect(mapStateToProps)(CommentItem);

export default ConnectedCommentItem;

Answer 2

您的childPosts可能是对象而不是数组。如果数据的结构如下：

childPosts: {
  0: 2
}

然后childPosts.length将是未定义的，并且递归元素将永远不会呈现。

您想要的是一个数组：

childPosts: [ 2 ]

然后您的代码应按书面形式工作。

Answer 3

使用hasChildPosts代替props.discussionPosts[commentId].childPosts.length > 0

递归组件不会在React中加载子级

3 个答案: