Flutter中FutureBuilder反复调用Future方法的问题求助

嘿，我来帮你搞定这个FutureBuilder反复调用异步方法的问题！我之前也踩过类似的坑，咱们一步步来排查解决：

很多人会犯这个错——比如写future: fetchData()，而不是用提前初始化好的变量。这样一来，每次Widget触发build（比如父组件重建、状态变化），这个异步方法都会被重新调用一次，完全不符合预期。

这是最稳妥的做法，核心就是只在initState里初始化一次Future，之后FutureBuilder一直复用这个变量，具体实现如下：

class HomePage extends StatefulWidget {
  const HomePage({Key? key}) : super(key: key); // 加const构造器，减少不必要的重建

  @override
  State<HomePage> createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  // 用late关键字延迟初始化Future变量
  late Future<YourDataModel> _dataFuture;

  @override
  void initState() {
    super.initState();
    // 只在initState里调用一次异步方法，把结果赋值给成员变量
    _dataFuture = _fetchDataFromApi();
  }

  // 你的HTTP请求方法
  Future<YourDataModel> _fetchDataFromApi() async {
    final response = await http.get(Uri.parse('你的API地址'));
    if (response.statusCode == 200) {
      // 解析数据成你的模型类
      return YourDataModel.fromJson(json.decode(response.body));
    } else {
      throw Exception('请求失败：${response.statusCode}');
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: FutureBuilder<YourDataModel>(
        // 这里用提前初始化好的成员变量，不是直接调用_fetchDataFromApi()！
        future: _dataFuture,
        builder: (context, snapshot) {
          if (snapshot.connectionState == ConnectionState.waiting) {
            return const Center(child: CircularProgressIndicator());
          } else if (snapshot.hasError) {
            return Center(child: Text('出错了：${snapshot.error}'));
          } else if (snapshot.hasData) {
            // 渲染你的数据
            return Text('获取到的数据：${snapshot.data!.toString()}');
          } else {
            return const Center(child: Text('无数据'));
          }
        },
      ),
    );
  }
}

你说用了AsyncMemoizer但没用，大概率是你把它的实例创建在了异步方法内部，导致每次调用方法都会新建一个Memoizer，起不到缓存作用。正确的做法是把AsyncMemoizer作为State的成员变量：

class _HomePageState extends State<HomePage> {
  // 把AsyncMemoizer声明为成员变量，只初始化一次
  final AsyncMemoizer<YourDataModel> _memoizer = AsyncMemoizer();

  Future<YourDataModel> _fetchDataWithMemoizer() async {
    // 用runOnce包裹你的请求逻辑，确保只执行一次
    return _memoizer.runOnce(() async {
      final response = await http.get(Uri.parse('你的API地址'));
      if (response.statusCode == 200) {
        return YourDataModel.fromJson(json.decode(response.body));
      } else {
        throw Exception('请求失败');
      }
    });
  }

  // 之后在initState或者FutureBuilder里调用这个方法都行，但建议还是存在成员变量里
}

• 不必要的setState调用：检查你的代码里有没有在build方法里、或者其他频繁触发的地方调用setState，这会导致Widget反复重建，虽然Future不会重复执行，但如果你的Future是动态生成的（比如每次build都新建），就会出问题。
• 父组件重建导致当前Widget重建：给你的StatefulWidget添加一个const构造器（如果允许的话），或者给它指定一个稳定的Key，避免父组件重建时把当前Widget也重新创建。
• Tab页面切换时重建：如果你的页面是在TabBar里，切换Tab时页面会被销毁重建，这时候可以用AutomaticKeepAliveClientMixin来保持页面状态：

class _HomePageState extends State<HomePage> with AutomaticKeepAliveClientMixin {
  @override
  bool get wantKeepAlive => true; // 返回true保持状态

  // 其他代码不变

  @override
  Widget build(BuildContext context) {
    super.build(context); // 必须调用super.build
    // ...你的build逻辑
  }
}

按照上面的方法调整后，你的异步请求应该只会执行一次啦！

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