Question

我有一个问题：我正在从MySQL数据库加载数据并以树视图形式粘贴它们，但是，我继续在标题中提到这个错误，并且它会以无限循环登录。

我打算做的是从Load.js中的服务器加载数据，将它们作为props传递给Tree.js，并从那里处理渲染。发生的事情是数据成功加载，我将它们传递给Tree.js，这会抛出标题中提到的错误

我正在使用fritz-c的react-sortable-tree包来构建我的树。

以下是代码：

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

未捕获的TypeError：将dbData映射到treeData [react]时，this.setState不是函数

0 个答案: