CODEWITHSUNDEEP
reactjsantd
vijayst
vijayst

Reputation: 21856

Disable caching for antd Tree

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?

Upvotes: 1

Views: 1444

Answers (1)

yesmeck
yesmeck

Reputation: 316

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

Upvotes: 1

Related Questions