树状结构的数组的属结构性转换

树状结构的数组的属结构性转换

有时候，当我们在写树状结构的时候， 发现后端返回的数据属性和我们使用的组件需要的数据格式不一致，需要我们人为的转换一下，我们就需要写一个处理函数了。

例如：

后端返回的数据结构是这样的：

const list = [
      {
        name:'aaa',
        children: [
          {name: 'aa1', children: [{
            name: 'aa11'
          }]}
        ]
      },
      {
        name:'bbb',
        children: [
          {name: 'bb1', children: [{
            name: 'bb11'
          }]}
        ]
      }
    ]

如我们使用 Ant Design 里面的树状联级筛选器：

它需要的数据结构是这样：

const options: Option[] = [
      {
        value: 'zhejiang',
        label: 'Zhejiang',
        children: [
          {
            value: 'hangzhou',
            label: 'Hangzhou',
            children: [
              {
                value: 'xihu',
                label: 'West Lake',
              },
            ],
          },
        ],
      },
    ]

那我们怎么把后端返回的数据格式转成我们需要的格式呢？

我们可以自己手动写一个转换格式的处理函数：

const  changeTree =  (list:any) =>{
    // 定义一个开关：如果list的children 是一个数组，并且children 的 length 大于0，说明他有子级，并且子级里有数据
    const haveChildren = Array.isArray(list.children) && list.children.length > 0;
      return {
          value: list.name,
          label: list.name,
          // 如果子级开关是 true，就循环调用函数本身，否则 返回 null
          children: haveChildren ? list.children.map((i:any) => changeTree(i)) : null
      };
    }

然后再在合适的位置，调用该函数：

const newList = (list||[]).map((item)=>{
    if(item.children) {
      return changeTree(item)
    }
    else {
      return {label: item.name,value:item.name}
    }
    console.log(newList);    
 })

接下来看看打印一下我们的newList吧。

就实现啦。