react 实现递归 不知道为啥渲染不到 初学者在线求教 急急急!!!感恩大佬

图片说明

import React, {Component} from "react";
import {connect} from "react-redux";
import { Tree, Icon } from 'antd';


const {TreeNode} = Tree ;


class BasicArea extends Component {
  constructor(props) {
    super(props);
    this.state = {
      treeArr: []
    }
  }



  data= [
    {
      "id":1,
      "name":"一级节点",
      "parentId":0,
      "isValid":true,
      "canAddChild":true,
      "parent":null,
      "children":[]
    },{
      "id":3,
      "name":"二级节点",
      "parentId":1,
      "isValid":true,
      "canAddChild":true,
      "parent":null,
      "children":[]
    },{
      "id":3,
      "name":"二级节点",
      "parentId":0,
      "isValid":true,
      "canAddChild":true,
      "parent":null,
      "children":[]
    },{
      "id":3,
      "name":"二级节点",
      "parentId":0,
      "isValid":true,
      "canAddChild":true,
      "parent":null,
      "children":[]
    },{
      "id":3,
      "name":"二级节点",
      "parentId":0,
      "isValid":true,
      "canAddChild":true,
      "parent":null,
      "children":[]
    }

  ]

  createTree = data => {
    let treeArr = [];
    //获取顶级父元素集合
    let roots = data.filter( elemt => elemt.parentId === 0 );
    treeArr.push(...roots);
    //从顶级元素开始,获取每个元素的子元素放到该元素的children树形中
    const getChildren = (resultarr, data) => {
      resultarr.forEach ((elemt,index) => {
        elemt.children = data.filter((item,index) => item.patentId === elemt.id );
        //判断当前元素是不是有子元素被添加, 如果有, 再在子元素这一层循环
        if( elemt.children.length > 0){
          getChildren(elemt.children,data);
        }
      });
    }
    getChildren(treeArr,data);
    console.log(treeArr);
    //最后更新一下数据
    this.setState({
      treeArr
    })

  };

  renderTree = treeArr => treeArr.map ( value => {

    //理论上支持无限深度的树状目录
    //遍历树状数组,如果发现他有children则先套上<TreeNode></TreeNode>,在对他children中的元素做相同的操作,直到children为空的元素停止
    //说明他已经是最深的那一层了
    if(value.children) {
      return(
        <TreeNode title ={
          <span>
            {value.name}
            <Icon type="plus" />
          </span>
        } key={value.id}>
          {/* 对children中的每个元素进行递归 */}
          {this.renderTree(value.children)}
        </TreeNode>
      )
    }

  });




  render(){
    return(
      <Tree>

        {this.renderTree(this.state.treeArr)}
      </Tree>
    )
  }

  componentDidMount(){
    this.createTree();
  }

}

export default connect(null, null)(BasicArea);

2个回答

你方法执行顺序有问题!createTree 执行时没有传参数,参数上的data类型还是字符串!

Csdn user default icon
上传中...
上传图片
插入图片
抄袭、复制答案,以达到刷声望分或其他目的的行为,在CSDN问答是严格禁止的,一经发现立刻封号。是时候展现真正的技术了!
立即提问

相似问题

2
react中自定义组件importl路径正确,代码也不报错但启动和打包都提示我的那个组件找不到不能被解析
2
用react ajax获取到json数据后怎么通过map方法循环输出??
2
在react的map方法中如何添加三元条件判断,实现条件渲染??
1
react如何实现类似jquery的apped和prepend的效果?
1
react中组件加载后变更ajax值,怎么让它重新加载,我设置setState没反应???
1
react-router如何像vue-router通过this.$router.push的方式编程实现路由跳转
1
create-react-app 报错无法创建项目,Extracting tar content of undefined failed
0
react 调用函数组件内部方法
0
webpack打包react项目成功但是打开index.html后一片空白。
0
React-Native 布局错位请教 实现回复
1
为什么在项目中,会有多个react版本的依赖
1
react select 如何从后端获取下拉框的值
2
React Native 在init project 一直卡在安装CocoaPods
1
react"^16.8.6" creacte-react-app@3.0.1脚手架npm run eject 问题?
1
/react-native/React/Base/RCTBridgeModule.h:10:9: 'React/RCTDefines.h' file not found
1
React 生成的网页跳转到其它页面再返回时React 生成的页面重新加载了
1
echarts-for-react 实现省地图需要每个省份都写一个js吗?有没有通用的模板
2
react 轮播图 下面这个效果 通过 那个组件能够实现
1
react 做一个listbox的组件
1
如何使antd的Select下拉框被一个按钮的点击事件重置回初始值?