Egg.js 實現一維的對象數組轉化為樹形數組

方式一：后端處理

1.增加 tools service

app/service/tools.js

/**
 * 構建樹形結構數據
 * @param {*} data
 */
buildTree(data) {
  const res = [];
  // 找出所有根節點
  for(let item of data){
    if(!item.pid){
      item.children = getNode(item.id);
      res.push(item);
    }
  }

  // 傳入根節點id 遞歸查找所有子節點
  function getNode(id) {
    const node = [];
    for(const item of data){
      if(item.pid === id){
        item.children = getNode(item.id);
        node.push(item);
      }
    }
    if(node.length === 0) return;
    return node;
  }
  return res;
}

2.獲取 數據庫 一維的對象數組

app/service/food.js

return await app.model.Food.findAll({
  raw: true // 設置為 true，即可返回源數據
});

3.處理后返回前端

app/controller/food.js

async lists() {
  const { ctx } = this;
  const data = await ctx.service.food.lists();
  if(data){
    ctx.body = {
      code: 200,
      message: '列表查詢成功',
      data: ctx.service.tools.buildTree(data)
    }
  }else{
    ctx.body = {
      code: 500,
      message: '列表查詢失敗',
      data: {}
    }
  }
}

方式二：前端處理

async componentDidMount() {
  let { data } = await axios.get(`${BaseUrl}/food/lists`);
  this.listData = data.data;
  this.setState({
    list: this._buildTree(0) // 一級pid為0
  });
}

// 實現一維的對象數組轉化為樹形數組
_buildTree = (id) => {
  const data = this.listData.filter((item) => item.pid === id);

  data.forEach(item => {
    item.children = this._buildTree(item.id);
  });

  return data;
}

效果圖