Disable caching for antd Tree

Question

I found this in the documentation of Antd - Tree component.

The number of treeNodes can be very large, but when enable checkable, it will spend more computing time, so we cached some calculations(e.g. this.treeNodesStates), to avoid double computing.

This note suggests that Tree state is cached. When I add / delete nodes from the Tree, the Tree does not seem to refresh. How should I disable caching or ensure that add / delete of nodes refreshes the tree?

Answer 1

You can add/delete nodes dynamically. See this codepen http://codepen.io/yesmeck/pen/JEjZmj?editors=001

const { Tree } = antd;
const TreeNode = Tree.TreeNode;

class Demo extends React.Component {
  state = {
    nodes: [
      { title: '1', key: '1' },
      { title: '2', key: '2' },
      { title: '3', key: '3' },
    ]
  };

  handleAdd = () => {
    const node = { title: (+new Date), key: (+new Date) }
    this.setState({ nodes: [...this.state.nodes, node] });
  };

  handleRemove = () => {
    this.setState({ nodes: this.state.nodes.slice(1) });
  };

  render() {
    return (
      <div>
        <Tree checkable defaultExpandAll>
          {this.state.nodes.map(node => 
            <TreeNode title={node.title} key={node.key} />
          )}
        </Tree>
        <button onClick={this.handleAdd}>Add node</button>
        <button onClick={this.handleRemove}>Remove node</button>
      </div>
    );
  }
}

ReactDOM.render(<Demo />, document.getElementById('container'));