Flutter - 在构建期间调用 setState() 或 markNeedsBuild()

Question

从 Firebase Cloud 加载帖子时显示错误。我在我的应用程序中使用提供程序

\n

setState() or markNeedsBuild() called during build.\n

\n

详细错误

\n

\n\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90 Exception caught by foundation library \xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\nThe following assertion was thrown while dispatching notifications for PostFunctions:\nsetState() or markNeedsBuild() called during build.\n\nThis _InheritedProviderScope<PostFunctions> widget cannot be marked as needing to build because the framework is already in the process of building widgets.  A widget can be marked as needing to be built during the build phase only if one of its ancestors is currently building. This exception is allowed because the framework builds parent widgets before children, which means a dirty descendant will always be built. Otherwise, the framework might not visit this widget during this build phase.\n

\n

当我加载帖子时我的代码..

\n

 Widget feedBody(BuildContext context) {\n    return SingleChildScrollView(\n      child: Padding(\n        padding: const EdgeInsets.only(top: 8.0),\n        child: Container(\n          child: StreamBuilder<QuerySnapshot>(\n            stream: FirebaseFirestore.instance\n                .collection('posts')\n                .orderBy('time', descending: true)\n                .snapshots(),\n            builder: (context, snapshot) {\n              if (snapshot.connectionState == ConnectionState.waiting) {\n                return Center(\n                  child: SizedBox(\n                    height: 200.0,\n                    width: 200.0,\n                    child: Lottie.asset('assets/animations/loading.json'),\n                  ),\n                );\n              } else {\n                return loadPosts(context, snapshot);\n              }\n            },\n          ),\n          height: MediaQuery.of(context).size.height * 0.80,\n          width: MediaQuery.of(context).size.width,\n          decoration: BoxDecoration(\n            color: constantColors.darkColor.withOpacity(0.6),\n            borderRadius: BorderRadius.only(\n              topLeft: Radius.circular(18.0),\n              topRight: Radius.circular(18.0),\n            ),\n          ),\n        ),\n      ),\n    );\n  }\n

\n

我的负载邮政编码

\n

Widget loadPosts(\n      BuildContext context, AsyncSnapshot<QuerySnapshot> snapshot) {\n    return ListView(\n        children: snapshot.data.docs.map((DocumentSnapshot documentSnapshot) {\n      Provider.of<PostFunctions>(context, listen: false)\n          .showTimeAgo(documentSnapshot.data()['time']);\n\n      return Container(\n        height: MediaQuery.of(context).size.height * 0.62,\n        width: MediaQuery.of(context).size.width,\n        child: Column(\n          mainAxisAlignment: MainAxisAlignment.start,\n          crossAxisAlignment: CrossAxisAlignment.start,\n          children: [\n            Padding(\n              padding: const EdgeInsets.only(\n                top: 8.0,\n                left: 8.0,\n              ),\n              child: Row(\n                children: [\n                  GestureDetector(\n                    onTap: () {\n                      if (documentSnapshot.data()['useruid'] !=\n                          Provider.of<Authenticationss>(context, listen: false)\n                              .getUserUid) {\n                        Navigator.pushReplacement(\n                          context,\n                          PageTransition(\n                            child: AltProfile(\n                              userUid: documentSnapshot.data()['useruid'],\n                            ),\n                            type: PageTransitionType.bottomToTop,\n                          ),\n                        );\n                      }\n                    },\n                    child: CircleAvatar(\n                      backgroundColor: constantColors.blueGreyColor,\n                      radius: 20.0,\n                      backgroundImage:\n                          NetworkImage(documentSnapshot.data()['userimage']),\n                    ),\n                  ),\n                  Padding(\n                    padding: const EdgeInsets.only(left: 8.0),\n                    child: Container(\n                      width: MediaQuery.of(context).size.width * 0.6,\n                      child: Column(\n                        mainAxisAlignment: MainAxisAlignment.start,\n                        crossAxisAlignment: CrossAxisAlignment.start,\n                        children: [\n                          Container(\n                            child: Text(\n                              documentSnapshot.data()['caption'],\n                              style: TextStyle(\n                                  color: constantColors.greenColor,\n                                  fontWeight: FontWeight.bold,\n                                  fontSize: 16.0),\n                            ),\n                          ),\n                          Container(\n                            child: RichText(\n                              text: TextSpan(\n                                text: documentSnapshot.data()['username'],\n                                style: TextStyle(\n                                  color: constantColors.blueColor,\n                                  fontSize: 14.0,\n                                  fontWeight: FontWeight.bold,\n                                ),\n                                children: <TextSpan>[\n                                  TextSpan(\n                                    text:\n                                        ' , ${Provider.of<PostFunctions>(context, listen: false).getImageTimePosted.toString()}',\n                                    style: TextStyle(\n                                      color: constantColors.lightColor\n                                          .withOpacity(0.8),\n                                    ),\n                                  )\n                                ],\n                              ),\n                            ),\n                          ),\n                        ],\n                      ),\n                    ),\n                  ),\n                  Container(\n                    width: MediaQuery.of(context).size.width * .2,\n                    height: MediaQuery.of(context).size.height * 0.05,\n                    child: StreamBuilder<QuerySnapshot>(\n                      stream: FirebaseFirestore.instance\n                          .collection('posts')\n                          .doc(documentSnapshot.data()['caption'])\n                          .collection('awards')\n                          .snapshots(),\n                      builder: (context, snapshot) {\n                        if (snapshot.connectionState ==\n                            ConnectionState.waiting) {\n                          return Center(\n                            child: CircularProgressIndicator(),\n                          );\n                        } else {\n                          return ListView(\n                            scrollDirection: Axis.horizontal,\n                            children: snapshot.data.docs\n                                .map((DocumentSnapshot documentSnapshot) {\n                              return Container(\n                                height: 30.0,\n                                width: 30.0,\n                                child: Image.network(\n                                    documentSnapshot.data()['award']),\n                              );\n                            }).toList(),\n                          );\n                        }\n                      },\n                    ),\n                  ),\n                ],\n              ),\n            ),\n            Padding(\n              padding: const EdgeInsets.only(top: 8.0),\n              child: Container(\n                height: MediaQuery.of(context).size.height * 0.45,\n                width: MediaQuery.of(context).size.width,\n                child: FittedBox(\n                  child: Image.network(\n                    documentSnapshot.data()['postimage'],\n                    scale: 2,\n                  ),\n                ),\n              ),\n            ),\n            Padding(\n              padding: const EdgeInsets.only(top: 8.0),\n              child: Padding(\n                padding: const EdgeInsets.only(left: 21.0),\n                child: Row(\n                  mainAxisAlignment: MainAxisAlignment.spaceEvenly,\n                  children: [\n                    Container(\n                      width: 80.0,\n                      child: Row(\n                        mainAxisAlignment: MainAxisAlignment.start,\n                        children: [\n                          GestureDetector(\n                            onLongPress: () {\n                              Provider.of<PostFunctions>(context, listen: false)\n                                  .showLikes(\n                                context,\n                                documentSnapshot.data()['caption'],\n                              );\n                            },\n                            onTap: () {\n                              print('adding like');\n                              Provider.of<PostFunctions>(context, listen: false)\n                                  .addLike(\n                                      context,\n                                      documentSnapshot.data()['caption'],\n                                      Provider.of<Authenticationss>(context,\n                                              listen: false)\n                                          .userUid);\n                            },\n                            child: Icon(\n                              FontAwesomeIcons.heart,\n                              color: constantColors.redColor,\n                              size: 22.0,\n                            ),\n                          ),\n                          StreamBuilder<QuerySnapshot>(\n                            stream: FirebaseFirestore.instance\n                                .collection('posts')\n                                .doc(documentSnapshot.data()['caption'])\n                                .collection('likes')\n                                .snapshots(),\n                            builder: (context, snapshot) {\n                              if (snapshot.connectionState ==\n                                  ConnectionState.waiting) {\n                                return Center(\n                                  child: CircularProgressIndicator(),\n                                );\n                              } else {\n                                return Padding(\n                                  padding: const EdgeInsets.only(left: 8.0),\n                                  child: Text(\n                                    snapshot.data.docs.length.toString(),\n                                    style: TextStyle(\n                                      color: constantColors.whiteColor,\n                                      fontWeight: FontWeight.bold,\n                                      fontSize: 18.0,\n                                    ),\n                                  ),\n                                );\n                              }\n                            },\n                          )\n                        ],\n                      ),\n                    ),\n                    Container(\n                      width: 80.0,\n                      child: Row(\n                        mainAxisAlignment: MainAxisAlignment.start,\n                        children: [\n                          GestureDetector(\n                            onTap: () {\n                              Provider.of<PostFunctions>(context, listen: false)\n                                  .shotCommentSheets(context, documentSnapshot,\n                                      documentSnapshot.data()['caption']);\n                            },\n                            child: Icon(\n                              FontAwesomeIcons.comment,\n                              color: constantColors.blueColor,\n                              size: 22.0,\n                            ),\n                          ),\n                          StreamBuilder<QuerySnapshot>(\n                            stream: FirebaseFirestore.instance\n                                .collection('posts')\n                                .doc(documentSnapshot.data()['caption'])\n                                .collection('comments')\n                                .snapshots(),\n                            builder: (context, snapshot) {\n                              if (snapshot.connectionState ==\n                                  ConnectionState.waiting) {\n                                return Center(\n                                  child: CircularProgressIndicator(),\n                                );\n                              } else {\n                                return Padding(\n                                  padding: const EdgeInsets.only(left: 8.0),\n                                  child: Text(\n                                    snapshot.data.docs.length.toString(),\n                                    style: TextStyle(\n                                      color: constantColors.whiteColor,\n                                      fontWeight: FontWeight.bold,\n                                      fontSize: 18.0,\n                                    ),\n                                  ),\n                                );\n                              }\n                            },\n                          )\n                        ],\n                      ),\n                    ),\n                    Container(\n                      width: 80.0,\n                      child: Row(\n                        mainAxisAlignment: MainAxisAlignment.start,\n                        children: [\n                          GestureDetector(\n                            onLongPress: () {\n                              Provider.of<PostFunctions>(context, listen: false)\n                                  .showAwardPresenter(context,\n                                      documentSnapshot.data()['caption']);\n                            },\n                            onTap: () {\n                              Provider.of<PostFunctions>(context, listen: false)\n                                  .showReward(context,\n                                      documentSnapshot.data()['caption']);\n                            },\n                            child: Icon(\n                              FontAwesomeIcons.award,\n                              color: constantColors.yellowColor,\n                              size: 22.0,\n                            ),\n                          ),\n                          StreamBuilder<QuerySnapshot>(\n                            stream: FirebaseFirestore.instance\n                                .collection('posts')\n                                .doc(documentSnapshot.data()['caption'])\n                                .collection('awards')\n                                .snapshots(),\n                            builder: (context, snapshot) {\n                              if (snapshot.connectionState ==\n                                  ConnectionState.waiting) {\n                                return Center(\n                                  child: CircularProgressIndicator(),\n                                );\n                              } else {\n                                return Padding(\n                                  padding: const EdgeInsets.only(left: 8.0),\n                                  child: Text(\n                                    snapshot.data.docs.length.toString(),\n                                    style: TextStyle(\n                                      color: constantColors.whiteColor,\n                                      fontWeight: FontWeight.bold,\n                                      fontSize: 18.0,\n                                    ),\n                                  ),\n                                );\n                              }\n                            },\n                          )\n                        ],\n                      ),\n                    ),\n                    Spacer(),\n                    Provider.of<Authenticationss>(context, listen: false)\n                                .getUserUid ==\n                            documentSnapshot.data()['useruid']\n                        ? IconButton(\n                            icon: Icon(\n                              EvaIcons.moreVertical,\n                              color: constantColors.whiteColor,\n                            ),\n                            onPressed: () {\n                              Provider.of<PostFunctions>(context, listen: false)\n                                  .showPostOptions(context,\n                                      documentSnapshot.data()['caption']);\n                            },\n                          )\n                        : Container(\n                            height: 0.0,\n                            width: 0.0,\n                          ),\n                  ],\n                ),\n              ),\n            ),\n          ],\n        ),\n      );\n    }).toList());\n  }\n}\n\n

\n

Answer 1

正如错误所描述的，甚至在构建函数完成之前就调用了 setState。

当此异常在调试或本地发布模式下发生时，您可能不会在 UI 中看到任何问题。但像这样的例外情况会显示灰屏或其他内容，而不是谷歌播放版本等上所需的小部件。

这意味着即使初始小部件已经加载，您也尝试刷新页面。

为了防止在构建方法已经在进行期间调用 setState，您可以在调用 setState 之前检查您的初始小部件是否已正确安装。为此，只需通过 if 语句包装您的 setState ，如下所示：

if(mounted){
   setState((){

   });
}

还有另一种方法是在构建方法完成后调用的。关注这个问题了解更多：当 Flutter 中完成“build”功能时，是否有任何回调告诉我？