Flutter获取Future数据后无点击立即更新状态及FutureBuilder setState报错解决方案

错误原因 #

你的报错根源是Flutter不允许在组件build流程中调用setState：FutureBuilder的builder回调属于当前组件build逻辑的一部分，此时触发setState会要求框架中断当前build流程重新执行，违反了Flutter的渲染规则，因此抛出异常。

方案1：延后setState执行时机（适配现有代码最小改动） #

将setState逻辑放到当前帧渲染完成后的回调中执行，不会和当前build流程冲突：

FutureBuilder(
  future: blogServices.articleComment(token, widget.article.id),
  builder: (context, snapshot) {
    if (snapshot.hasError) {
      return Container();
    } else if (snapshot.connectionState == ConnectionState.done && snapshot.data != null) {
      List<ArticleComment> comments = snapshot.data;
      // 将setState延后到当前帧绘制结束后执行
      WidgetsBinding.instance.addPostFrameCallback((_) {
        if (mounted) {
          setState(() {
            commentsCount = comments.length;
          });
        }
      });
      return Container();
    } else {
      return CircularProgressIndicator();
    }
  },
)

注意要加mounted判断，避免组件已被销毁后调用setState产生额外异常

方案2：在initState中发起异步请求（更符合规范的实现方式） #

你当前的用法属于误用FutureBuilder：FutureBuilder的设计目的是根据异步状态动态构建UI，如果你只需要拿到异步数据后更新状态，完全不需要通过FutureBuilder实现，直接在组件初始化时发起请求即可：

class YourPageState extends State<YourPage> {
  int commentsCount = 0;

  @override
  void initState() {
    super.initState();
    _loadCommentCount();
  }

  Future<void> _loadCommentCount() async {
    try {
      List<ArticleComment> comments = await blogServices.articleComment(token, widget.article.id);
      if (mounted) {
        setState(() {
          commentsCount = comments.length;
        });
      }
    } catch (e) {
      // 自行处理请求错误逻辑
    }
  }

  @override
  Widget build(BuildContext context) {
    // 你的页面UI逻辑，直接使用commentsCount变量即可
    // 加载中可以根据commentsCount初始值/额外loading标记判断展示对应组件
  }
}

这个方案没有多余的组件嵌套，逻辑更清晰，性能也更好。

方案3：直接在FutureBuilder中使用数据（无需额外状态变量） #

如果你只需要在UI中展示评论数量，根本不需要单独声明commentsCount变量存储，直接通过snapshot取值即可，完全不需要调用setState：

FutureBuilder<List<ArticleComment>>(
  future: blogServices.articleComment(token, widget.article.id),
  builder: (context, snapshot) {
    if (snapshot.hasError) {
      return const Text('评论加载失败');
    } else if (snapshot.connectionState == ConnectionState.done && snapshot.data != null) {
      final comments = snapshot.data!;
      // 直接使用comments.length构建UI
      return Text('评论数：${comments.length}');
    } else {
      return const CircularProgressIndicator();
    }
  },
)

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