按需响应Kendo Treeview无法正常工作

问题描述

我们有一个Kendo React Treeview，根据需要我们可以通过单击父项获得子记录。但是没有显示Treeview箭头语法。下面是代码片段：

import * as React from 'react';
import { useState,useEffect } from 'react';
import { TreeView,processtreeViewItems,handleTreeViewCheckChange,moveTreeViewItem,TreeViewDragAnalyzer,TreeViewDragClue } from '@progress/kendo-react-treeview'
import '@progress/kendo-react-animation';

    const baseUrl = 'https://odatasampleservices.azurewebsites.net/V4/northwind/northwind.svc/Categories';
    const requestinit = { method: 'GET',accept: 'application/json' };

function DomainComponent() {

        const [domainData,setDomainData] = useState([]);

    interface ICategoryProps{
        CategoryID: number,CategoryName: string
    }
        useEffect(() => {
            fetch(baseUrl,requestinit).then(response => response.json())
            .then(json => {
                
                const data = json.value.map(({ CategoryID,CategoryName } : ICategoryProps) => {
                    return { text: CategoryName,id: CategoryID,hasChildren: true }
                });
                setDomainData(data);
            });
        },[]);

        const onExpandChange = () => {
            debugger
            const categoryIndex = 10;
            //const categoryIndex = Number(event.itemHierarchicalIndex);
            const { data,category } = copyDataAndCategory(categoryIndex);
            category.expanded = !category.expanded;

            setDomainData(data);

            !category.items && loadProducts(categoryIndex,category.id);
        }

        const loadProducts = (categoryIndex: number,categoryId: number) => {
            fetch(`${baseUrl}(${categoryId})/Products`,requestinit).then(response => response.json())
                .then(json => {
                    const { data,category } = copyDataAndCategory(categoryIndex);
                    category.items = json.value.map(({ ProductName }: any) => {
                        return { text: ProductName }
                    });

                    setDomainData(data);
                });
        }

        const copyDataAndCategory = (categoryIndex: number) => {
            const data = domainData.slice();
            const category = data[categoryIndex] = { ...data[categoryIndex] };

            return { data,category };
        }
    
    return (<TreeView data={domainData} expandIcons={true} onExpandChange={onExpandChange} />);
    }

    export default DomainComponent;

由于没有出现箭头语法，因此我们可以扩展特定项目以显示该父项目的子项目。任何帮助。

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）