Flutter中调用setState()触发构建期间调用错误，求修复方案

你在StreamBuilder的builder回调里调用了setState()，而builder本身处于Flutter的组件构建阶段，此时框架正在生成UI，调用setState()会触发新的构建请求，导致框架冲突，所以抛出这个异常。

方案1：直接在builder内过滤数据（推荐） #

你的需求是筛选出当月的数据，完全可以在builder里直接处理，不需要更新组件状态——因为StreamBuilder会自动监听stream的新数据并重新构建UI，直接在回调内处理过滤逻辑即可，既简单又符合组件设计意图。

修改后的代码：

StreamBuilder<List<Model>>(
  stream: db.stream(),
  builder: (context, snapshot) {
    if (snapshot.connectionState == ConnectionState.waiting) {
      return ...; // 保留你原来的加载组件
    }

    final List<Model>? data = snapshot.data;

    if (data != null) {
      // 直接过滤出当月的数据
      final finalData = data.where((item) {
        return item.aboutLastUpdated.toDate().month == Timestamp.now().toDate().month;
      }).toList();
      // 用过滤后的finalData渲染UI
      return ...; // 比如ListView.builder(itemCount: finalData.length, ...)
    }

    return ...; // 数据为空时的占位组件
  },
);

方案2：延迟执行setState（仅当必须用状态变量时） #

如果确实需要把过滤后的数据存在组件的状态变量里（比如后续其他逻辑要复用），可以把setState()放到组件构建完成后的回调中，避开构建阶段：

修改后的代码：

StreamBuilder<List<Model>>(
  stream: db.stream(),
  builder: (context, snapshot) {
    if (snapshot.connectionState == ConnectionState.waiting) {
      return ...; // 保留原来的加载组件
    }

    final List<Model>? data = snapshot.data;

    if (data != null) {
      // 等当前UI构建完成后再执行状态更新
      WidgetsBinding.instance.addPostFrameCallback((_) {
        setState(() {
          final_data.clear(); // 先清空，避免重复添加数据
          for (final item in data) {
            if (item.aboutLastUpdated.toDate().month == Timestamp.now().toDate().month) {
              final_data.add(item);
            }
          }
        });
      });
      return ...; // 渲染UI，注意处理final_data未更新时的初始状态
    }

    return ...; // 数据为空时的占位组件
  },
);

• 优先用方案1，因为StreamBuilder的核心作用就是响应数据流变化并构建UI，直接在回调内处理数据更高效，也能避免状态管理的冗余。
• 方案2一定要记得清空状态变量，否则每次stream推送新数据时，旧数据会被重复添加进去。

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