Flutter中如何重载FutureBuilder并清除旧数据避免任务重复展示

问题根源 #

你遇到的任务重复问题由两个错误导致：

1. getTasks() 请求逻辑中，新拉取的任务直接追加到了全局 taskList 中，没有清空上一个月的旧数据
2. FutureBuilder 渲染列表时使用了全局累加的 taskList，而非接口本次返回的 snapshot.data 快照数据

修复方案 #

1. 调整请求逻辑，每次拉取前清空旧数据

修改你的 getTasks() 方法，请求前先清空全局任务列表：

Future<List<Task>> getTasks() async {
  // 先清空上一个月的旧任务
  taskList.clear();
  // 保留你原有从web服务拉取任务的逻辑，拉取后赋值给taskList即可
  // ... 原有请求代码
  return taskList;
}

2. 修正FutureBuilder的数据源

优先使用接口返回的快照数据渲染，避免全局变量污染：

FutureBuilder<List<Task>>(
  future: getTasks(),
  builder: (BuildContext context, AsyncSnapshot<List<Task>> snapshot){
    if(snapshot.hasError){
      return const Text('Erreur');
    }
    if(snapshot.hasData){
      // 直接用本次请求返回的snapshot.data渲染
      return ListView(
        shrinkWrap: true,
        physics: NeverScrollableScrollPhysics(),
        children: snapshot.data!.map((e) => TaskContainer(
          task: e
        )).toList(),
      );
    }
    return const Center(child: CircularProgressIndicator());
  }
)

3. 切换月份时主动清空旧数据（可选，避免加载过程中旧数据残留）

修改月份切换的方法，切换时主动清空任务列表：

_toPreviousMonth(){
  setState(() {
    datess.clear();
    dayss.clear();
    taskList.clear(); // 清空旧任务
    startMonth = DateTime(startMonth.year, startMonth.month - 1, 1);
  });
}

_toNextMonth(){
  setState(() {
    datess.clear();
    dayss.clear();
    taskList.clear(); // 清空旧任务
    startMonth = DateTime(startMonth.year, startMonth.month + 1, 1);
  });
}

优化建议（可选） #

可以把Future实例存在State中，避免页面不必要的重构触发重复请求：

1. 在State类中定义变量：Future<List<Task>>? _tasksFuture;
2. 在initState和切换月份的方法中赋值：_tasksFuture = getTasks();
3. FutureBuilder的future参数改为使用_tasksFuture

内容的提问来源于stack exchange，提问作者JS1