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

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

代码如下:


组件定义:

<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展开第一级目录后的数据:
图片.png

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

阅读 240
评论
    2 个回答

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

    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

      记录一下这个坑!
      遇到这种数据好像正常,但就是不显示的,除了检查字段名还应该检查数据,保证每条数据id是唯一的。(这里是treeDataSimpleMode模式下)不同模式唯一性字段要求不一样。具体参考文档
      图片.png
      还有就是treeDataSimpleMode可以设为object,来自定义与id,Pid,rootId对应的数据字段名。

        撰写回答

        登录后参与交流、获取后续更新提醒

        相似问题
        推荐文章