2

I have a problem: I am Loading data from MySQL Database and pasting them in a treeview form however, I keep on getting this error mentioned in the title, and it logs in an infinite loop.

What I intend to do is load data from server in Load.js, pass them into Tree.js as props, and handle the rendering from there. What's happening is the data is successfully loaded, I pass them into Tree.js, which throws the error mentioned in the title

I am using react-sortable-tree package by fritz-c in order to build my tree.

Here's the code:

Load.js:

import React, { Component } from 'react';
import SortableTree, { addNodeUnderParent, removeNodeAtPath,  
getFlatDataFromTree,
getTreeFromFlatData, } from 'react-sortable-tree';
import Tree from './tree';

class Load extends Component{

constructor() {
    super();
    this.state = {
        dbData:[]
    };
}

loadSkillsFromServer() {
    $.ajax({
        url: '/api/skills',
        dataType: 'json',
        cache: false,
        success: function(data) {
            //set the state with the newly loaded data so the display will update
            this.setState({dbData: data});
        }.bind(this),
        error: function(xhr, status, err) {
            console.error('/api/skills', status, err.toString());
        }.bind(this)
    });
}

componentDidMount() {
    //Once the component is fully loaded, we grab the skills
    this.loadSkillsFromServer();
    //... and set an interval to continuously load new data:
    setInterval(this.loadSkillsFromServer, this.props.pollInterval);
}

render(){
    console.log(this.state.dbData);
    return (
        <Tree data = {this.state.dbData} />
    );
}

}

Tree.js:

import React, { Component } from 'react';
import SortableTree, { addNodeUnderParent, removeNodeAtPath,  
getFlatDataFromTree,
getTreeFromFlatData, } from 'react-sortable-tree';

export default class Tree extends Component {

constructor(props) {
super(props);
this.state = {
        treeData: getTreeFromFlatData({
          flatData: this.props.data.map(node => ({ ...node, title: 
          node.Skill_Name })),
          getKey: node => node.idSkill, // resolve a node's key
          getParentKey: node => node.Parent_Skill_ID, // resolve a 
          node's parent's key
          rootKey: null, // The value of the parent key when there is 
          no parent (i.e., at root level)
        }),
      };
   }

  render() {

  return (
     <div style={{ height: 1000 }}>
      <SortableTree
        treeData={this.state.treeData}
        onChange={treeData => this.setState({ treeData })}
      />
     </div>
  );
 }
}
edargham
  • 93
  • 8

0 Answers0