Javascript 未呈现JSX

所以基本上，我有一个组件，它从后端获取数据，并以K-nary树格式创建嵌套组件

Tree.js

import React, { Component } from 'react';
import { connect } from 'react-redux';
import TreeNode from './TreeNode';

class Tree extends Component {
    getRootNodes = () => {
        return this.props.comments.filter(node => !node.cid_reference);
    }   

    getChildNodes = (node) => {
        let comments = this.props.comments;
        let children = comments.filter(comment => comment.cid_reference == node.cid);
        return children;
    }

    render() {
        let rootNodes = this.getRootNodes()
        return (

            <div>
                {console.log(rootNodes)}
                {
                    rootNodes.map(node => (
                        <TreeNode 
                            node={node}
                            getChildNodes={this.getChildNodes}
                        />

                    ))
                }
            </div>
        )
    }
}

const mapStateToProps = (state) => {
    return {
        comments: Object.values(state.comment.dbComments)
    };
}

export default connect(mapStateToProps, null)(Tree); 

import React from 'react';
import { Link } from 'react-router-dom';

// Initially root nodes gets passed in
const TreeNode = (props) => {

    const { node, getChildNodes, level } = props;
    console.log(node);

    const renderComments = (level, node) => {
        let count = level;
        console.log(node)
        const helper = (node) => {
            if (count == 0) {
                console.log(count, 'returned', node)
                return node;
            } else {
                count = count - 1;
                console.log(count);
                return helper(
                    <div className="comment">
                        <div className="comments">
                            {node}
                        </div>
                    </div>
                );                  
            }
        }
        /*
            - if level=0, then <div className="comment">
            - if level=1, then <div className="comment"><div className="comments"..
                                                            <div className="comment"
        */
        helper(node);
    }



    return (
        <React.Fragment key={node.cid}>
            {renderComments(level,
                <div className="comment">
                    <div className="content">
                        <a className="author">{node.username ? node.username : "annonymous"}</a>
                        <div className="metadata">
                            <span className="date">{node.date_created}</span>
                        </div>
                        <div className="text">{node.comment}</div>
                        <div className="actions">
                            <Link to={'/streams/comments/new'} className="reply">Reply</Link>
                        </div>
                    </div>     
                </div>            
            )}
            {getChildNodes(node).map(childNode => (<TreeNode
                                                    {...props}
                                                    node={childNode}
                                                    level={level+1}
                                                    />)) 
            }        
        </React.Fragment>
    );
}

TreeNode.defaultProps = {
    level: 0,
};

export default TreeNode;

import React，{Component}来自'React'；
从'react redux'导入{connect}；
从“/TreeNode”导入TreeNode；
类树扩展组件{
getRootNodes=（）=>{
返回此.props.comments.filter（node=>！node.cid\u引用）；
}   
getChildNodes=（节点）=>{
让评论=this.props.comments；
让children=comments.filter（comment=>comment.cid_reference==node.cid）；
返回儿童；
}
render（）{
让rootNodes=this.getRootNodes（）
返回(
{console.log（rootNodes）}
{
rootNodes.map（节点=>(
))
}
)
}
}
常量mapStateToProps=（状态）=>{
返回{
注释：Object.values（state.comment.dbComments）
};
}
导出默认连接（MapStateTops，null）（树）；

TreeNode.js

import React, { Component } from 'react';
import { connect } from 'react-redux';
import TreeNode from './TreeNode';

class Tree extends Component {
    getRootNodes = () => {
        return this.props.comments.filter(node => !node.cid_reference);
    }   

    getChildNodes = (node) => {
        let comments = this.props.comments;
        let children = comments.filter(comment => comment.cid_reference == node.cid);
        return children;
    }

    render() {
        let rootNodes = this.getRootNodes()
        return (

            <div>
                {console.log(rootNodes)}
                {
                    rootNodes.map(node => (
                        <TreeNode 
                            node={node}
                            getChildNodes={this.getChildNodes}
                        />

                    ))
                }
            </div>
        )
    }
}

const mapStateToProps = (state) => {
    return {
        comments: Object.values(state.comment.dbComments)
    };
}

export default connect(mapStateToProps, null)(Tree); 

import React from 'react';
import { Link } from 'react-router-dom';

// Initially root nodes gets passed in
const TreeNode = (props) => {

    const { node, getChildNodes, level } = props;
    console.log(node);

    const renderComments = (level, node) => {
        let count = level;
        console.log(node)
        const helper = (node) => {
            if (count == 0) {
                console.log(count, 'returned', node)
                return node;
            } else {
                count = count - 1;
                console.log(count);
                return helper(
                    <div className="comment">
                        <div className="comments">
                            {node}
                        </div>
                    </div>
                );                  
            }
        }
        /*
            - if level=0, then <div className="comment">
            - if level=1, then <div className="comment"><div className="comments"..
                                                            <div className="comment"
        */
        helper(node);
    }



    return (
        <React.Fragment key={node.cid}>
            {renderComments(level,
                <div className="comment">
                    <div className="content">
                        <a className="author">{node.username ? node.username : "annonymous"}</a>
                        <div className="metadata">
                            <span className="date">{node.date_created}</span>
                        </div>
                        <div className="text">{node.comment}</div>
                        <div className="actions">
                            <Link to={'/streams/comments/new'} className="reply">Reply</Link>
                        </div>
                    </div>     
                </div>            
            )}
            {getChildNodes(node).map(childNode => (<TreeNode
                                                    {...props}
                                                    node={childNode}
                                                    level={level+1}
                                                    />)) 
            }        
        </React.Fragment>
    );
}

TreeNode.defaultProps = {
    level: 0,
};

export default TreeNode;

从“React”导入React；
从'react router dom'导入{Link}；
//最初，根节点被传入
常量树节点=（道具）=>{
const{node，getChildNodes，level}=props；
console.log（节点）；
const renderComments=（级别、节点）=>{
让计数=水平；
console.log（节点）
const helper=（节点）=>{
如果（计数=0）{
日志（计数，'返回'，节点）
返回节点；
}否则{
计数=计数-1；
控制台日志（计数）；
返回助手(
{node}
);                  
}
}
/*
-如果级别=0，则
-如果level=1，则返回
helper
，但在
helper
内部，因此实际上不会返回任何内容，因为您没有返回外部helper

更改此项：

    const helper = (node) => {
        if (count == 0) {
            console.log(count, 'returned', node)
            return node;
        } else {
            count = count - 1;
            console.log(count);
            return helper(
                <div className="comment">
                    <div className="comments">
                        {node}
                    </div>
                </div>
            );                  
        }
    }

const helper=（节点）=>{
如果（计数=0）{
日志（计数，'返回'，节点）
返回节点；
}否则{
计数=计数-1；
控制台日志（计数）；
返回助手(
{node}
);                  
}
}

将来

returnhelper=（节点）=>{
如果（计数=0）{
日志（计数，'返回'，节点）
返回节点；
}否则{
计数=计数-1；
控制台日志（计数）；
返回(
{node}
);                  
}
} 
您返回
助手
但在
助手
内部，因此实际上不会返回任何内容，因为您没有返回外部助手

更改此项：

    const helper = (node) => {
        if (count == 0) {
            console.log(count, 'returned', node)
            return node;
        } else {
            count = count - 1;
            console.log(count);
            return helper(
                <div className="comment">
                    <div className="comments">
                        {node}
                    </div>
                </div>
            );                  
        }
    }

const helper=（节点）=>{
如果（计数=0）{
日志（计数，'返回'，节点）
返回节点；
}否则{
计数=计数-1；
控制台日志（计数）；
返回助手(
{node}
);                  
}
}

将来

returnhelper=（节点）=>{
如果（计数=0）{
日志（计数，'返回'，节点）
返回节点；
}否则{
计数=计数-1；
控制台日志（计数）；
返回(
{node}
);                  
}
} 
多亏了@MarcBaumbach，我犯了一个愚蠢的错误。

const renderComments = (level, node) => {
    let count = level;
    const helper = (node) => {
        if (count == 0) {
            return node;
        } else {
            count = count - 1;
            return helper(
                <div className="comment">
                    <div className="comments">
                        {node}
                    </div>
                </div>
            );                  
        }
    }
    return helper(node); // The line that fixed the code
}

const renderComments=（级别，节点）=>{
让计数=水平；
const helper=（节点）=>{
如果（计数=0）{
返回节点；
}否则{
计数=计数-1；
返回助手(
{node}
);                  
}
}
return helper（node）；//修复代码的行
}
多亏了@MarcBaumbach，我犯了一个愚蠢的错误。

const renderComments = (level, node) => {
    let count = level;
    const helper = (node) => {
        if (count == 0) {
            return node;
        } else {
            count = count - 1;
            return helper(
                <div className="comment">
                    <div className="comments">
                        {node}
                    </div>
                </div>
            );                  
        }
    }
    return helper(node); // The line that fixed the code
}

const renderComments=（级别，节点）=>{
让计数=水平；
const helper=（节点）=>{
如果（计数=0）{
返回节点；
}否则{
计数=计数-1；
返回助手(
{node}
);                  
}
}
return helper（node）；//修复代码的行
}
在
renderComments
中没有顶级的
return
。可能
返回帮助程序（节点）；
？@MarcBaumbach感谢您的回复！我有
返回帮助程序（节点）
，它位于if语句中。该函数是一个递归函数，使用一个helper函数来处理递归。递归部分构建嵌套注释，一旦到达基本情况，它将返回完全嵌套的注释。在上面发布的代码中，您有
helper（节点）；
位于
renderComments
函数的最末端，调用
renderComments
时不会返回任何内容。我认为应该是
返回帮助器（节点）；
if语句中的返回用于返回递归调用，但是对
renderComments
底部的
helper
的顶级调用永远不会返回，因此
renderComments
将返回
未定义的
而不会渲染