React丨antd tree 異步加載，只有首次點擊加載，再次點擊不加載

一、環境版本

• antd 3.x tree

二、樹形結構

• 02
  • 0201
    • 020105
      • ZB0201000024
• 07
  • 0701
    • 070101
      • ZB0701010001

三、問題描述

• 異步加載，首次點擊加載，再次點擊不加載

四、解決方案

• onExpand：展開/收起節點時觸發

• onLoad：節點加載完畢時觸發

• loadedKeys：（受控）已經加載的節點，需要配合 loadData 使用

• expandedKeys：（受控）展開指定的樹節點

五、代碼

state = {
    treeExpandedKeys: [], 	// tree 展開節點 ['string,'string']
    treeLoadedKeys: [], 	// tree 已經加載節點
}

<Tree
    className={styles.eleTree}
    checkStrictly={true}
    expandedKeys={treeExpandedKeys}
    showIcon
    blockNode
    onExpand={this.handleTreeExpand}
    onSelect={this.handleTreeSelect}
    loadData={this.onLoadData}
    onLoad={this.onLoadTree}
    loadedKeys={this.props.treeLoadedKeys}
    >
    {this.renderTreeNodes(treeData)}
</Tree>

handleTreeExpand = (keys) => {
    const { dispatch, treeExpandedKeys, treeLoadedKeys } = this.props
    let newLoadKeys = treeLoadedKeys
    // 判斷當前是展開還是收起節點，當前展開的長度比之前的少，說明是收起
    if (treeExpandedKeys.length > keys.length) {
      // 當是收起的時候，把這個收起的節點從loadedKeys中移除
      // newLoadKeys = treeLoadedKeys.filter((i) => keys.includes(i))
      let newStr = ''
      treeLoadedKeys.map(item => {
        if (!keys.includes(item)) {
          newStr = item
        }
      })
      let newArr3 = []
      treeLoadedKeys.map(item => {
        if (this.treeExpandcheckStr(item, newStr)) {
          if (item.length < newStr.length) {
            newArr3.push(item)
          }
        } else {
          newArr3.push(item)
        }
      })
      newLoadKeys = newArr3
      keys = newArr3
    }
    dispatch({
      type: 'draw3/save',
      payload: {
        treeLoadedKeys: newLoadKeys,
        treeExpandedKeys: keys
      }
    })
}

onLoadTree = loadedKeys => {
    const { dispatch } = this.props
    dispatch({
      type: 'draw3/save',
      payload: {
        treeLoadedKeys: loadedKeys
      }
    })
}