antd tree使用踩小坑

小白时用tree的时候很容易踩的坑，当你回填了父节点的key时，未选中的子节点是会自动选中的（这时就很有可能忽略未被选中的子节点）

官方给出的文档是有提示的

 

 

所以一般我们就要去处理获得的数据。首先就是要去寻找所有子节点的key及父节点没有children的key，如：

 

const requestList = (arr) => arr.reduce((res, e) => {

  if (e.children && e.children.length > 0) {

    res = [...res, ...requestList(e.children)]

  } else {

    res.push(e.key);

  }

  return res;

}, [])

 

然后就去对比后端反的数据（treeData：tree的节点数据   arr：后台返回的数据）

const result= [...new Set(requestList(treeData))].filter((item) =>new Set(window.eval(arr)).has(item));

 

最后就可以把result回填到tree组件了

<Tree

        onExpand={onExpand}

        expandedKeys={expandedKeys}

        autoExpandParent={autoExpandParent}

        onCheck={onCheck}

        checkedKeys={result}

        treeData={treeData}

      />