代码之家 › 专栏 › 技术社区 › Nikul Panchal

获取错误:此.setState不是react中的函数

react-redux reactjs

Nikul Panchal · 技术社区 · 5 年前

this.setState({ ["node_" + n]: test_node }) 我犯了个错误 this.setState is not a function

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

3 回复 | 直到 5 年前

Brian Thompson 5 年前

hooks .

kartik shah 5 年前

您正在使用 this.setState . this 指任何类别的范围。所以为了使用 this.<anything> 它必须是类组件。您仍然可以使用创建和更新功能组件中的状态 useState

Flagship1442 5 年前

正如其他人提到的,因为它是一个功能组件,所以您需要使用它 useState 而不是 this.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 () => {
  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 updateSomething = (key, value) => setState({...state, [key]: value })