antd treeselect异步加载数据不能正常显示

Question

在按照官方的异步请求来进行改造，但出现了数据时正常的，但显示错误，请问该如何解决？

代码如下：

---

组件定义:

<TreeSelect
 treeDataSimpleMode={true}
 style={{?width: '100%' }}
 value={this.state.value}
 dropdownStyle={{?overflow: 'auto' }}
 placeholder="选择处室及领用人"
 onChange={this.onChange}
 loadData={this.onLoadData}
 onSelect={this.onSelect}
 treeData={treeData}
 />

treeData展开第一级目录后的数据：

显示的视图：

（后面接受到的数据丢失了）
第一次加载顶级目录是正常的，在点击展开浙江省后就显示错误了。请问该如何解决，万分感谢。

Answer 1

下面是复制官网的代码，再根据你的数据编写的；
可以比对一下 哪里出问题了

import React from 'react'

import { TreeSelect } from 'antd';

class Demo extends React.Component {

 state =?{

 value: undefined,

 treeData:?[

 { id: '33', pId: 0, value: '33', title: '浙江省',isLeaf:false }

 ],

 };

 genTreeNode =?(parentId, isLeaf = false) => {

 const random = Math.random()

 .toString(36)

 .substring(2, 6);

 return [

 { id: random, pId: parentId, value: random, title: random+'杭州市',isLeaf:isLeaf },

 { id: random+'1', pId: parentId, value: random+'1', title: random+'嘉兴市',isLeaf:isLeaf },

 { id: random+'2', pId: parentId, value: random+'2', title: random+'温州市',isLeaf:isLeaf },

 ];

 };

 onLoadData = treeNode =>

 new Promise(resolve => {

 const { id }?= treeNode.props;

 setTimeout(() => {

 this.setState({

 treeData: this.state.treeData.concat(

 this.genTreeNode(id, false)

 ),

 });

 resolve();

 }, 300);

 });

 onChange = value => {

 console.log(value);

 this.setState({ value });

 };

 render()?{

 const { treeData }?= this.state;

 console.log("treeData==",treeData)

 return (

 <TreeSelect

 treeDataSimpleMode

 style={{ width: '100%' }}

 value={this.state.value}

 dropdownStyle={{ maxHeight: 400, overflow: 'auto' }}

 placeholder="Please?select"

 onChange={this.onChange}

 loadData={this.onLoadData}

 treeData={treeData}

 />

 );

 }

}

export?default Demo