react this.Setstate method cannot change TreeView structure?

[baizp]

import React, { Component } from "react";
import { Panel, TreeView, TreeViewItem } from "@playcanvas/pcui/react";

export default class Hierarchy extends Component {
  modelHierarchy = [{ title: "test1", key: "111" }];

  componentDidMount() {
    this.modelHierarchy.push({ title: "add", key: "222" });

    **//pcui bug?????? Cannot dynamically change the tree,Or what should I do**
    this.setState({ modelHierarchy: this.modelHierarchy });

  }

  mapNodes = (nodes) => {
    return nodes.map((node) => (
      <TreeViewItem text={node.title} key={node.key}>
        {node.children &&node.children.length > 0 && this.mapNodes(node.children)}
      </TreeViewItem>
    ));
  };

  render() {
    return (
      <Panel class="hierarchy" width={256} resizable="right" panelType="normal">
        {this.modelHierarchy.length > 0 && (
          <TreeView allowReordering={false} allowDrag={false}>
            {this.mapNodes(this.modelHierarchy)}
          </TreeView>
        )}
      </Panel>
    );
  }
}

[baizp]

"modelHierarchy" has indeed changed!

<div>{this.modelHierarchy.length + ""}</div>

2 is displayed here, but the tree is not updated. @ellthompson

[willeastcott]

Hey @josflesan - any thoughts on this? I'm not quite sure what the question is to be honest, @baizp. Can you explain in more detail what this issue is about?

[baizp]

TreeView

Oh, ok, in fact, after modifying the data, React actively calls the render method, but TreeView has not been modified successfully.