使用Provider搭配FutureBuilder出现无限循环问题如何解决

核心根因 #

1. Future实例未缓存导致循环调用：直接将Provider.of<EatenMeals>(context, listen: false).getServerMeals()写在FutureBuilder的future参数中，每次组件重绘都会重新执行该异步方法。方法执行成功后调用notifyListeners()会触发Consumer监听的状态更新，进而再次触发组件重绘，形成无限循环。
2. ListView布局异常：ListView嵌套在Column的Container中时没有用Expanded/Flexible包裹，会触发viewport高度无限制的渲染错误，即便解决循环问题也无法正常展示列表。

修复方案 #

将当前StatelessWidget改为StatefulWidget，在initState生命周期中仅执行一次数据请求并缓存Future实例，同时补充布局约束与异常处理逻辑。

修复后代码 #

// 改为StatefulWidget实现Future缓存
class TimelineWidget extends StatefulWidget {
  @override
  State<TimelineWidget> createState() => _TimelineWidgetState();
}

class _TimelineWidgetState extends State<TimelineWidget> {
  late Future<void> _loadMealsFuture;

  @override
  void initState() {
    super.initState();
    // 组件初始化时仅调用一次数据请求，缓存Future实例
    _loadMealsFuture = Provider.of<EatenMeals>(context, listen: false).getServerMeals();
  }

  @override
  Widget build(BuildContext context) {
    return Column(
      mainAxisAlignment: MainAxisAlignment.start,
      children: [
        // 用Expanded包裹FutureBuilder，给ListView提供明确高度约束
        Expanded(
          child: FutureBuilder(
            future: _loadMealsFuture,
            builder: (ctx, snapshot) {
              if (snapshot.connectionState == ConnectionState.waiting) {
                return const Center(
                  child: CircularProgressIndicator(),
                );
              }
              // 补充异常处理逻辑，避免请求失败时页面空白
              if (snapshot.hasError) {
                return const Center(
                  child: Text('餐品列表加载失败，请稍后重试'),
                );
              }

              return Consumer<EatenMeals>(
                builder: (ctx, mealsList, child) => ListView.builder(
                  itemCount: mealsList.eatenMeals.length,
                  itemBuilder: (ctx, index) => DailyEaten(mealsList.eatenMeals[index]),
                ),
              );
            },
          ),
        ),
      ],
    );
  }
}

补充说明 #

当前Provider中EatenItem赋值逻辑存在笔误：userId: e['objectId']和id: e['objectId']重复取值，建议确认后端字段后将userId改为对应字段如e['userId']。

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