时间戳

首页 > 解决方案 > Flutter Future 构建器，future 被多次调用

android - Flutter Future 构建器，future 被多次调用

问题描述

问题：我在SingleChildScrollView内的Column中有一个未来的构建器， 它多次调用它的未来（无限）。

 FutureBuilder(
                    future: ProductLoaderUtil.getSimilarProducts(
                        context, widget.productItem.productCategoryId),
                    builder: (context, val) {
                      if (val.hasData && (!val.hasError))
                        return ListProductHorizontal(
                          productItemsHorizontal: val.data,
                          flag: false,
                        );
                      else
                        return Container(
                          height: _height * 0.06,
                          color: FakeWhite,
                        );
                    },
                  ),

被调用的函数是这样的，

         static Future<List<ProductItem>> getSimilarProducts(
                BuildContext context, String category) async {
                List<ProductItem> products = [];
                String categoryName = categories[0];
  
                debugPrint(categoryName + " --- ");
                await Firestore.instance
                    .collection("GlobalDataBase")
                    .document(categoryName)
                    .collection("ITEMS")
                    .limit(4)
                    .getDocuments()
                    .then((value) {
                  value.documents.forEach((element) {
            //        debugPrint(element.data.toString());
                    products.add(ProductItem.fromJson(element.data));
                  });
                });
                return products;
              }

标签： androidfluttergoogle-cloud-firestore

解决方案

这可能是因为您使用的某个地方setState()以及当您重新构建您的小部件树并再次FutureBuilder调用该方法时，通过拥有这样的有状态小部件future来防止这种访问未来的方法initState()

// inside state class...
  
   Future getPopluarProductsFuture;

   @override
  void initState() {
    super.initState();
    getPopularProductsFuture = getPopularProducts(
                        context, widget.productItem.productCategoryId);
  }

 // now for the FutureBuilder make it like this 
  FutureBuilder(
   future: getPopularProductsFuture,
   builder: ......
)

推荐阅读