React Hook 项目中使用了antd4.0 Tree(树形组件)默认展开指定的节点踩坑记录

项目中使用antd-Tree组件（树形组件），要求默认展开指定的一个节点，但是展开之后在点击收缩，就无法再收缩了。必须配合onExpand事件和autoExpandParent属性。

一、项目环境

react: 16+

antd :4.x 

二、需要注意

1.expandedKeys 的类型也很重要，比如下面key是number类型expandedKeys也必须是数字expandedKeys=[1,2]，如果是这样xpandedKeys=["1","2"]也不会生效.

key是string类型expandedKeys也必须是数字expandedKeys=['1','2']

2.传入的treeData中的key值要唯一，一般实际开发中后端从数据库拿的都是id，因此存在从多个库拿数据id相同的问题,此时需要加上—_或则- 拼接id 是比较好的方法

三、代码展示

数据：

const treeData = [
  {
    title: '0-0',
    key: 1,
    children: [
      {
        title: '0-0-0',
        key: 4,
        children: [
          {
            title: '0-0-0-0',
            key: 12,
          },
          {
            title: '0-0-0-1',
            key: 13,
          },
          {
            title: '0-0-0-2',
            key: 14,
          },
        ],
      },
      {
        title: '0-0-1',
        key: 15,
        children: [
          {
            title: '0-0-1-0',
            key: 5,
          },
          {
            title: '0-0-1-1',
            key: 6,
          },
          {
            title: '0-0-1-2',
            key: 7,
          },
        ],
      },
      {
        title: '0-0-2',
        key: 8,
      },
    ],
  },
  {
    title: '0-1',
    key: 2,
    children: [
      {
        title: '0-1-0-0',
        key: 9,
      },
      {
        title: '0-1-0-1',
        key: 10,
      },
      {
        title: '0-1-0-2',
        key: 11,
      },
    ],
  },
  {
    title: '0-2',
    key: 3,
  },
];

组件：

const Demo = () => {
  const [expandedKeys, setExpandedKeys] = useState([2]);
  const [autoExpandParent, setAutoExpandParent] = useState(true);

    useEffect(()=>{
        setExpandedKeys([`${parentRegionIds}`])
    },[parentRegionIds])

       console.log('expandedKeys',expandedKeys) 
//展开的回调 
const onExpand = (expandedKeysValue) => { 
    console.log('onExpand', expandedKeysValue); // if not set autoExpandParent to false, if children expanded, parent can not collapse. 
   // or, you can remove all expanded children keys.  
   setExpandedKeys(expandedKeysValue); 
   setAutoExpandParent(false); 
}; 
return ( 
       <Tree 
           onExpand={onExpand} //展开事件 
           expandedKeys={expandedKeys}//默认展开的key 
           autoExpandParent={autoExpandParent}//是否自动展开父节点
          //showLine={true} //是否开启节点之间带连接线的树 开启之后可以用 switcherIcon 修改默认图标 
          //switcherIcon={<DownOutlined />} //默认图标
          treeData={treeData}//树节点数据
    />
  );
};

四、总结

antd跟默认相关的前缀有default的都只是第一次有用，第二次就没用了。

五、重点

在实现这个功能需求的时候，我的默认第一个需要展开的节点是从别的组件传递过来的，所以就会存在第一次值有可能是空的或者undefined，然后我使用的是hook,useState第一次赋值就会有这样一个问题，我的值第一次试空或者undefined,useState不会再更新了，所以我的默认值为空，默认节点也不会展开。一直没想明白这个问题。后来想到了使用useEffect,解决了这个问题。

 useEffect(()=>{
        setExpandedKeys([`${parentRegionIds}`])
    },[parentRegionIds])

还有一种方式就是使用if判断，如果parentRegionIds有值再setExpandedKeys更新一下

const [expandedKeys, setExpandedKeys] = useState([]);
if(props.parentRegionIds{
  setExpandedKeys(props.parentRegionIds)
}