一、使用autoExpandParent和defaultExpandAll不生效

问题描述：

设置了autoExpandParent和defaultExpandAll为true，树节点没有自动展开

原因：

从服务端获取数据渲染树组件，树组件只在首次渲染时生效，但这时treeData未拿到服务端的数据为空，当拿到服务端的数据时已经是第N次渲染了，就没有默认展开。

解决方案一：

没获取到数据前不加载组件。

{
    treeData.length > 0 &&
        <Tree
            autoExpandParent
            defaultExpandAll
            treeData={treeData}
        />
}

解决方案二：

组件中新加一个属性key。记录treeData的变化，当从接口拿到treeDate时，更新key，key值改变，组件也会更新。切记，更新key一定要在更新treeData后。

const [key, setKey] = useState(0)

const queryTreeData = async () => {
    ...
    setTreeData(treeData);
    setKey(1) 
}

    ...

    <Tree
        autoExpandParent
        defaultExpandAll
        treeData={treeData}
        key={key}
    />

二、warning

问题描述：

浏览器报了几个warning

Warning: Tree node must have a certain key: [undefined]

Warning: Tree node must have a certain key: [undefined > undefined]

原因：

服务端下发的数据，每个父节点和子节点只有唯一的id，没有key，需要前端对数据做处理。

解决：

useEffect(() => {
    let newTree = formatTreeData(treeData, []);
    setTreeData(newTree);
}, [treeData]);

const formatTreeData = (list, keys) => {
    let listTemp = JSON.parse(JSON.stringify(list));
    if (listTemp && listTemp.length > 0) {
        for (let item of listTemp) {
            item.key = item.id;
            if (item.child.length > 0) {
                item.children = formatTreeData(item.children, keys);
            }
        }
        return listTemp;
    }
};

三、默认选中的问题

问题描述：

有弹出菜单需要默认选中上次选中的节点，服务端会将上次所有选中节点的key（或id）放在数组中返回给前端，单用defaultCheckedKeys={服务端返回的key（或id）}不生效，需要和checkedKeys搭配使用才行。

const queryTreeData = async () => {
    let params = {
    ...
    };
    let res = await queryManageTree(params);
    if (res && res.success) {
        ...
        setSelectedMenuIds(res.result.data.selectedIds);
        return true;
    } else {
        return false;
    }
};

<Tree
    autoExpandParent={true}
    defaultExpandAll={true}
    checkables
    treeData={treeData}
    onCheck={handleNodeCheck}
    defaultCheckedKeys={selectedMenuIds}
    checkedKeys={selectedMenuIds}
/>

后续遇到了问题将会持续更新。