Reactjs 获取错误：this.setState不是react中的函数

当我试图声明此.setState{[node_u+n]：test_node}时，我收到错误消息。setState不是一个函数，在这里我上传了完整的代码，有人能检查我的代码并帮助我解决此问题吗

import createEngine, { DiagramModel, DefaultNodeModel, DefaultLinkModel } from '@projectstorm/react-diagrams';
import * as React from 'react';
import { CanvasWidget } from '@projectstorm/react-canvas-core';
import { DemoCanvasWidget } from '../helpers/DemoCanvasWidget';

const data_json = require('../client-demo-simple/data.json');

const all_tables = data_json.base.tables;

console.log(all_tables)

export default () => {
    this.state = {
        node_level: []
    }
    //1) setup the diagram engine
    var engine = createEngine();
    //2) setup the diagram model
    var model = new DiagramModel();

    //3-A) create a default node
    let test_node = null;
    for (let n = 0; n < all_tables.length; n++) {
        let table_name = all_tables[n].name;
        let table_description = all_tables[n].description;
        let table_fields = all_tables[n].fields;
        let random_number_1 = Math.floor(Math.random() * 101);
        let random_number_2 = Math.floor(Math.random() * 101);
        let random_number_3 = Math.floor(Math.random() * 101);
        test_node = new DefaultNodeModel({
            name: table_name,
            color: 'rgb(' + random_number_1 + ',' + random_number_2 + ',' + random_number_3 + ')'
        });
        this.setState({ ["node_" + n]: test_node })
        test_node.setPosition(100, 100);
        for (let n = 0; n < table_fields.length; n++) {
            let field_name = table_fields[n].name;
            test_node.addOutPort(field_name);
        }

        model.addAll(test_node);

    }
    engine.setModel(model);
    model.setLocked(true);
    return (
        <DemoCanvasWidget>
            <CanvasWidget engine={engine} />
        </DemoCanvasWidget>
    );
};

---

setState是从React.Component继承而来的。您不是在创建一个扩展组件的类，而是在创建一个功能组件。要在功能组件中使用状态，您需要使用。

您使用的是this.setState。这是指任何类别的范围。所以为了使用这个。它必须是类组件。您仍然可以使用react 16和更高版本中支持的useState钩子在功能组件中创建和更新状态。

如其他人所述，因为它是一个功能组件，您需要使用useState而不是this.setState。这有点尴尬，因为您根据节点的ID动态添加节点，但您可以这样做：

import createEngine, {
  DiagramModel,
  DefaultNodeModel,
  DefaultLinkModel
} from '@projectstorm/react-diagrams';
import * as React from 'react';
import { CanvasWidget } from '@projectstorm/react-canvas-core';
import { DemoCanvasWidget } from '../helpers/DemoCanvasWidget';

const data_json = require('../client-demo-simple/data.json');

const all_tables = data_json.base.tables;

console.log(all_tables);

export default () => {
  const [state, setState] = React.useState({ node_level: [] }); // <-- best to hold all state like this, since you're adding nodes to state dynamically

  const addNodeToState = (nodeId, newNode) => setState({ ...state, [`node_${nodeId}`]: newNode }); // <-- new function to make adding nodes easier. Must spread existing state first

  //1) setup the diagram engine
  var engine = createEngine();
  //2) setup the diagram model
  var model = new DiagramModel();

  //3-A) create a default node
  let test_node = null;
  for (let n = 0; n < all_tables.length; n++) {
    let table_name = all_tables[n].name;
    let table_description = all_tables[n].description;
    let table_fields = all_tables[n].fields;
    let random_number_1 = Math.floor(Math.random() * 101);
    let random_number_2 = Math.floor(Math.random() * 101);
    let random_number_3 = Math.floor(Math.random() * 101);
    test_node = new DefaultNodeModel({
      name: table_name,
      color: 'rgb(' + random_number_1 + ',' + random_number_2 + ',' + random_number_3 + ')'
    });

    addNodeToState(n, test_node); // <-- use the function we just created to add node to state

    test_node.setPosition(100, 100);
    for (let n = 0; n < table_fields.length; n++) {
      let field_name = table_fields[n].name;
      test_node.addOutPort(field_name);
    }

    model.addAll(test_node);
  }
  engine.setModel(model);
  model.setLocked(true);
  return (
    <DemoCanvasWidget>
      <CanvasWidget engine={engine} />
    </DemoCanvasWidget>
  );
};

在这里使用setState时要小心，因为它会覆盖整个状态。如果要编辑状态的其他部分，可能需要使用其他函数来确保始终首先扩展现有状态，即const updatesmething=key，value=>setState{…state，[key]：value}

This.state只能用于类组件。在功能组件中使用useState