a543462378 2022-05-24 17:42 采纳率: 87.9%
浏览 82
已结题

react+antd项目,异步加载树加载数据后页面崩溃报错?怎么解决?

react+antd项目,项目中使用异步加载树,点击树中的箭头加载数据。但是一点击就报错,报错如下

img


项目代码如下

export default () => {
    const [treeData, setTreeData] = useState([])

    function handleLevelChange(e) {
        console.log('e: ', e)
        getChildRelationList({
            fid: e,
        }).then(res => {
            if (res.code === '0') {
                setResult(res.data)
                const result = transferData1(res.data, '-1');
                setTreeList(result)
                console.log(result);
            }
        })
    }

    function transferData(list, fatherId) {
        // console.error('list, fatherId', list, fatherId);
        let arr = []

        list.forEach(item => {
            if (item.pcfid === fatherId) {
                arr.push({
                    title: item.title,
                    key: item.key,
                    children: transferData(list.filter(element => element.pcfid !== fatherId), item.cfid),
                    pcfid: item.pcfid,
                    cfid: item.cfid
                })
            }
        })

        return arr;
    }

    function transferData1(list, fatherId) {
        // console.error('list, fatherId', list, fatherId);
        let arr = []

        list.forEach(item => {
            if (item.pcfid === fatherId) {
                arr.push({
                    title: item.companyName,
                    key: item.levelFid,
                    children: [],
                    pcfid: item.pcfid,
                    cfid: item.cfid
                })
            }
        })

        return arr;
    }

    function onLoadTreeData(node) {
        console.error('------------', node);
        new Promise((resolve) => {
            // if (children) {
            //     resolve();
            //     return;
            // }
            getChildRelationList({ fid: node.key, pcfid: node.cfid }).then(res => {
                // console.log('--------------------', res);
                let arr = []

                res.data.forEach(item => {
                    if (item.pcfid === node.cfid) {
                        arr.push({
                            title: item.companyName,
                            key: item.levelFid,
                            children: [],
                            pcfid: item.pcfid,
                            cfid: item.cfid
                        })
                    }
                })
                if (res.code === '0') {
                    // const result = transferData(res.data, node.pcfid)
                    // console.error('00000', result);
                    let conductList= [ ...treeList,...arr ]
                    const result = transferData(conductList, '-1');
                    setTreeList(...result)
                    console.error('222222222', result);
                    console.error('222222222', conductList);
                    // setTreeList(origin =>
                    //     updateTreeData(origin, node.cfid, arr)
                    // );
                    // resolve();
                }
            })
        });
    }


    function updateTreeData(list, key, children) {
        console.error('asdasdasdadsads', list, key, children);
        return list.map(node => {
            console.log(node, node.pcfid);
            if (node.cfid === key) {
                console.error('222222222', node);
                console.error('222222222', children);
                return { ...node, children };
            }
            if (node.children) {
                return { ...node, children: updateTreeData(node.children, key, children) };
            }
            console.error('111111111111111111111', node);
            return node;
        });
    }

    function onCheck(keys) {
        setCheckedKeys(keys)
    }

    return (
      
            <Modal
                visible={visible}
                footer={null}
                width={800}
                onCancel={() => { setVisible(false) }}
            >
                <Form
                    form={form}
                    onFinish={onFinish}
                    labelCol={{ span: 6 }}
                    wrapperCol={{ span: 14 }}
                >

                        <Tree treeData={treeList} loadData={onLoadTreeData} checkable checkStrictly defaultExpandAll={true} checkedKeys={checkedKeys} onCheck={onCheck} />

                </Form>
            </Modal>
        </div>
    )
}

这问题在哪里,要怎么解决?

  • 写回答

2条回答

      报告相同问题?

      相关推荐 更多相似问题

      问题事件

      • 系统已结题 6月24日
      • 已采纳回答 6月16日
      • 创建了问题 5月24日

      悬赏问题

      • ¥15 layui upload.render 问题 有偿
      • ¥15 “with “is not allowed in strict mode
      • ¥15 ADS2020使用村田数据库仿真出错
      • ¥15 如何解决爬取网站不定时不返回数据
      • ¥20 有几个关于fpga的基础问题黑盒仿真,建立保持时间,和仿真覆盖理论。
      • ¥20 如何在NCBI上下载高通量的测序数据
      • ¥15 L型TFET的器件参数
      • ¥15 nacos启动失败,文件夹权限
      • ¥20 vb6.0窗体中的vscroll控件无法响应鼠标滚轮事件,请教方法
      • ¥15 如何在linux服务器做视频静态资源访问接口