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

Question

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

项目代码如下

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>
    )
}

这问题在哪里，要怎么解决？

Answer 1

我没用过react。不过我刚才看了一下，你在dom上写的变量 没在代码里定义呢，比如treeList等。