一个异步加载的tree组件初始状态是这样：

此时的treeData是：

treeData: [

{

title: 'Expand to load', key: '0', children: [

{ title: 'child', key: '0-0', isLeaf: false }

]

}

]

点击+号，模拟异步请求数据，扩展成这样：

此时的状态是：

treeData: [

{

title: 'Expand to load', key: '0', children: [

{ title: 'child', key: '0-0', isLeaf: false ,children:[

{ title: 'Child Node', key: "0-0-0" },

{ title: 'Child Node', key: "0-0-1" }

]}

]

}

]

然后，此时点击按钮，希望返回初始状态：

treeData: [

{

title: 'Expand to load', key: '0', children: [

{ title: 'child', key: '0-0', isLeaf: false }

]

}

]

但是实际结果是：

问题是：

child前面并不是+号(不能点击)，但是状态isLeaf设置的是false

Expand to load展开了，希望的是不展开

感觉是Tree组件并没有重新渲染，而是在原来的基础上update state。求助怎么解决？

主要代码：

import React from 'react';

import ReactDOM from 'react-dom';

import './index.css';

import { Tree } from 'antd';

const TreeNode = Tree.TreeNode;

class Demo extends React.Component {

state = {

treeData: [

{

title: 'Expand to load', key: '0', children: [

{ title: 'child', key: '0-0', isLeaf: false }

]

}

],

}

onLoadData = (treeNode) => {

return new Promise((resolve) => {

if (treeNode.props.children) {

resolve();

return;

}

setTimeout(() => {

console.log(treeNode);

treeNode.props.dataRef.children = [

{ title: 'Child Node', key: `${treeNode.props.eventKey}-0` },

{ title: 'Child Node', key: `${treeNode.props.eventKey}-1` },

];

this.setState({

treeData: [...this.state.treeData],

});

resolve();

}, 1000);

});

}

btnClick = () => {

this.setState({

treeData: [

{

title: 'Expand to load', key: '0', children: [

{ title: 'child', key: '0-0', isLeaf: false }

]

}

],

});

}

renderTreeNodes = (data) => {

return data.map((item) => {

if (item.children) {

return (

{this.renderTreeNodes(item.children)}

);

}

return ;

});

}

render() {

return (

);

}

}

ReactDOM.render(, document.getElementById('root'));

如果需要的话，可以到这边直接下载demo：https://github.com/wyzgo/antd_test.git