Flutter中调用setState时如何避免FutureBuilder重复加载数据？

核心原因是你将Firebase数据获取逻辑直接放在了FutureBuilder的future参数中，每次setState触发页面重绘时，都会生成新的Future实例，导致FutureBuilder重复执行数据加载。
按以下步骤修改即可避免该问题：

1. 在State类中定义成员变量存储加载Future和选中状态，仅在页面初始化时执行一次数据加载：

class CategoryListPageState extends State<CategoryListPage> {
  // 存储数据加载Future，仅初始化1次
  late Future<List<Category>> _loadCategoryFuture;
  // 存储当前选中的分类ID，控制选中变色
  int? _selectedCateId;

  @override
  void initState() {
    super.initState();
    // 页面初始化时执行一次数据加载，后续重绘不会重复执行
    _loadCategoryFuture = fetchCateFromFirebase();
  }

  // 你原有从Firebase拉取分类数据的方法
  Future<List<Category>> fetchCateFromFirebase() async {
    // 原有数据拉取逻辑保持不变
  }

2. FutureBuilder绑定预定义的Future变量，不要直接传入异步方法调用：

@override
Widget build(BuildContext context) {
  return FutureBuilder<List<Category>>(
    // 绑定预初始化的Future，重绘时复用已完成的结果，不会重新请求
    future: _loadCategoryFuture,
    builder: (context, snapshot) {
      // 原有加载状态、错误处理逻辑保持不变
      if (snapshot.hasData) {
        return ListView.builder(
          itemCount: snapshot.data!.length,
          itemBuilder: (context, index) {
            final cate = snapshot.data![index];
            final isSelected = cate.id == _selectedCateId;
            return GestureDetector(
              onTap: () {
                // 点击仅更新选中状态，不会触发数据重加载
                setState(() {
                  _selectedCateId = cate.id;
                });
              },
              child: Container(
                // 根据选中状态切换颜色
                color: isSelected ? Colors.lightGreen : Colors.white,
                padding: const EdgeInsets.all(12),
                child: Text(cate.name),
              ),
            );
          },
        );
      }
      // 其他状态（加载中、错误）的处理逻辑保持不变
      return const CircularProgressIndicator();
    },
  );
}

如果后续需要主动刷新列表数据，只要重新给_loadCategoryFuture赋值后调用setState即可主动触发重加载：

// 下拉刷新时主动重新加载数据
void refreshList() {
  setState(() {
    _loadCategoryFuture = fetchCateFromFirebase();
  });
}

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