前端多級聯選時遇到的問題及解決思路

class Region {
  int id = 0;
  List<Region> children = [];
}


List<Region> levelOneList = [];

List<Region> levelTowList = [];

int levelOneIndex = 0;
int levelTwoIndex = 0;
void onLevelOneIndexChange(int index) async{
  levelOneIndex = index;
  
  //當一級改變的時候 重置二級 三級資料
  levelTwoIndex = 0;
  levelTowList.clear();
  var levelOneRegion = levelOneList[index];
  //已經請求過介面的 不再請求 直接使用之前的資料
  if(levelOneRegion.children.isNotEmpty){
    //出問題的寫法
    levelTowList = levelOneRegion.children[index].children;
  }else {
    //根據id 請求下一級資料 並賦值 levelOneRegion.children
    await requestByParentId(parent: levelOneRegion);
    //出問題的寫法
    levelTowList = levelOneRegion.children[index].children;
    
  }
}

void onLevelTwoIndexChange(int index){
  levelTwoIndex = index;
}


Future requestByParentId({Region?  parent}) async{
  
}

場景是做一個類似於選擇城市的多級聯選。下一級的資料需要透過上一級的id去獲取。

levelTowList = levelOneRegion.children[index].children;

我原本的期望是已經請求過介面的,不再請求直接使用之前的資料。但是當上一級資料改變的時候。需要清空當前級以及之後的所有資料。如下：

levelTowList.clear();

但是因為上面給levelTowList賦值的方式，導致levelTowList與levelOneRegion.children[index].children指向的是用一個集合，levelTowList清空的時候levelOneRegion.children[index].children 也會清空。導致之前的快取的children也被清空。

levelTowList.addAll(levelOneRegion.children[index].children);

應該用addAll 的方式把children 新增進來。這樣levelTowList清空的時候，不會影響到levelOneRegion.children[index].children