国家地区三级列表展示问题

国家地区三级列表展示问题
用到的是树形组件，之前是一进页面渲染了全部的数据，数据少还行，数据太多页面直接卡的进不去
期望是：初进页面不一下全部渲染，点击展开的时候调用一次接口，渲染一部分数据。

初次进入页面这块我应该怎么改一下。

该回答内容部分引用GPT，GPT_Pro更好的解决问题
针对国地区三级列表展示问题，可以采用分层调用接口的方式来实现。可以先加载一级数据，然后用户点击一级数据时再加载二级数据，再点击二级数据时加载三级数据，以此类推，直到加载完所有数据。

具体实现可以这样：

// 加载一级数据
async loadFirstLevelData() {
  try {
    const res = await request.get('/api/getFirstLevelData');
    this.setState({ firstLevelData: res });
  } catch (err) {
    console.log(err);
  }
}
// 加载二级数据
async loadSecondLevelData(parentId) {
  try {
    const res = await request.get('/api/getSecondLevelData', { parentId });
    this.setState({ secondLevelData: res });
  } catch (err) {
    console.log(err);
  }
}
// 加载三级数据
async loadThirdLevelData(parentId) {
  try {
    const res = await request.get('/api/getThirdLevelData', { parentId });
    this.setState({ thirdLevelData: res });
  } catch (err) {
    console.log(err);
  }
}

如果回答有帮助，望采纳。