Рекурсивный компонент не загружает дочерний элемент в React - PullRequest
Новая
       9

Рекурсивный компонент не загружает дочерний элемент в React

2 голосов
/ 10 июля 2019

У меня есть следующий компонент для отображения набора комментариев (и их ответов). Если комментарий имеет непустой массив childPosts, то компонент снова вызывается с идентификаторами childPosts. Все комментарии доступны из магазина редуксов через props.discussionPosts. 

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 устанавливается для идентификаторов комментариев без родительского комментария. 

<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:

enter image description here

Я не получаю никакой ошибки, но этот рекурсивный компонент не работает должным образом. Любая помощь?

Ответы [ 3 ]

2 голосов
/ 10 июля 2019

У меня недостаточно знаний о редуксе, но что если вы создадите компонент с 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;
1 голос
/ 10 июля 2019

Похоже, ваш childPosts может быть объектом, а не массивом.Если данные структурированы следующим образом: 

childPosts: {
  0: 2
}

, тогда childPosts.length будет неопределенным, и ваш рекурсивный элемент никогда не будет визуализирован.

То, что вы хотите - это массив: 

childPosts: [ 2 ]

тогда ваш код должен работать как написано.

0 голосов
/ 10 июля 2019

Используйте hasChildPosts вместо props.discussionPosts[commentId].childPosts.length > 0

...