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