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>
);
}
}