vue 使用 iview组件库下的tree组件，使用异步加载数据的时候报错

Question

问题描述

vue 使用 iview组件库下的tree组件，使用异步加载数据的时候报错

问题出现的环境背景及自己尝试过哪些方法

根据官方文档，使用 load-data 属性可以异步加载子节点，需要给数据增加 loading 来标识当前是否在加载中。
load-data 第一个参数为当前节点信息；执行 load-data 的第二个参数，将需要添加的数据传入。
如果某节点不包含 loading 和 children 字段，则不会应用异步加载效果。
传送门：
https://www.iviewui.com/compo...

相关代码

// 请把代码文本粘贴到下方（请勿用图片代替代码）
html
<Tree :data="classList" :load-data="loadClassData" class="mytree" ref="tree"></Tree>

js
axios请求成功后
if (res.result_code == 1) {

res.classList.forEach(i => {
    //havaNextClass是后端返回用来判断是否还有孩子节点，true代表有
    if (i.havaNextClass) {
        i.loading = false;
        i.children = [];
    }
});

this.classList = res.classList;

异步的loadClassData方法：
同样是axios请求成功后：
if (res.result_code == 1) {

res.classList.forEach(i => {
    if (i.havaNextClass) {
        i.loading = false;
        i.children = [];
    }

});
callback(res.classList);

你期待的结果是什么？实际看到的错误信息又是什么？

当点击正常的havaNextClass为true的节点，即不是叶子节点的时候，数据正常加载，tree控件也正常，但是当点击叶子节点的时候（最末尾没有下一级了），页面正常，但是控制台报错：
Uncaught TypeError: Cannot read property 'length' of undefined

at VueComponent.handleExpand (iview.js?0536:25872)
at invoker (vue.esm.js?efeb:2027)
at HTMLSpanElement.fn._withTask.fn._withTask (vue.esm.js?efeb:1826)

在异步方法里加上判断都不行，try catch也同样报这个错，我大概知道报这个错的意思是该节点下面已无孩子节点，即length前面的数组已不存在或为undefined，我把官方的示例代码拷贝一份改一下（改成一个是叶子节点一个不是叶子节点的，也同样报错），这样不知道算不算官方的bug呢？虽然页面不影响，但是看着就很不爽，轻微代码洁癖。。。。请各位大大指点一下下呗

Answer 1

callback(res.classList);
应该是你在这里传了undefined

tree.loadData(item, children => {
    ...
    if (children.length) {//这里 如果不传值或者undefined null之类的就会报错
        ...
    }
});