映射时无法使用从 Firebase 获取的数据作为下拉菜单中重复值错误的项目

Question

我的代码使用硬编码的项目列表工作得很好。但是当使用从 firebase 中获取的项目用作 DropdownMenu 项目时，我得到“断言错误：应该只有一个项目具有下拉按钮的值。这是我使用的相关代码片段，不同之处在于仅硬编码项目或获取项目来自 firebase。我也尝试过手动迭代获取的数据，而不是使用地图功能。潜在重复项目的结果相同。

我在做什么？感谢您的帮助，至少可以说我很困惑。

child: DropdownButtonFormField(
                        dropdownColor: Colors.deepOrange,
                        hint: Text(
                          "Category",
                          style: TextStyle(
                            color: Colors.white,
                            fontSize: Device.screenType == ScreenType.mobile
                                ? 16.sp
                                : 18.sp,
                          ),
                        ),
                        value: productCategory,
                        decoration: const InputDecoration.collapsed(
                          hintText: '',
                        ), //removes underline from dropdown widget
                        icon: const Icon(
                          Icons.arrow_drop_down,
                          color: Colors.white,
                        ),
                        iconSize: Device.screenType == ScreenType.mobile
                            ? 18.sp
                            : 22.sp,
                        elevation: 16,
                        validator: (value) => value == 'Category'
                            ? 'Please  select product category'
                            : null,
                        items: categoryItems.map(
                          (cat) {
                            return DropdownMenuItem(
                              // key: dropdownKeys[cat.id],
                              value: cat.id,
                              child: Row(
                                children: [
                                  Icon(
                                    Icons.check,
                                    color: Colors.white,
                                    size: Device.screenType ==
                                            ScreenType.mobile
                                        ? 16.sp
                                        : 20.sp,
                                  ),
                                  SizedBox(
                                    width: 3.w,
                                  ),
                                  Text(
                                    cat,
                                    style: TextStyle(
                                      color: Colors.white,
                                      fontSize: Device.screenType ==
                                              ScreenType.mobile
                                          ? 16.sp
                                          : 20.sp,
                                    ),
                                  ),
                                ],
                              ),
                            );
                          },
                        ).toList(),
                        // items: dropdownMenuItems,
                        onChanged: (dropdownValue) {
                          ref
                              .read(categoryProvider.notifier)
                              .categoryOnChanged(dropdownValue.toString());
                        },
                      ),

提供者和控制者：

final categoryProvider = StateNotifierProvider<Category, List<Category>>(
  (ref) => Category(id: '', imageUrl: '', name: ''),
);

class Category extends StateNotifier<List<Category>> {
  final String id;
  final String name;
  final String imageUrl;

  List get productCategory => state;

  Category({
    required this.id,
    required this.name,
    required this.imageUrl,
  }) : super(<Category>[]);

  categoryOnChanged(String value) {
    if (value.isEmpty) {
      return name;
    }
    return name;
  }

  Future getCategoryLabels() async {
    await FirebaseFirestore.instance.collection('categories').get().then(
      (QuerySnapshot categorySnapshot) {
        for (var element in categorySnapshot.docs) {
          state = [
            ...state,
            Category(
              id: element.get('categoryId'),
              name: element.get('name'),
              imageUrl: element.get('image'),
            )
          ];
        }
      },
    );
    // if (kDebugMode) {
    //   print(state);
    // }
    // return state;
  }
}

帮助理解下面添加的补充代码。 首先是我尝试手动迭代从 firebase 获取的数据并打印出下拉键后的控制台输出：

{DyH4AF3v1QEnuvfDwB6b: [#62d46], OxF7EvBOZxsCzSUBXsE0：[#0f7c2]，Q22xgxoMxWOVJ9yH7Fx0：[#d390d]，hWtHgAsf5GFWASsB8DGw：[#b90d0]，sxRbMsr3H249mZinYuWl：[#02c50]} 颤动：{DyH4AF3v1QEnuvfDwB6b：[#f2443]， OxF7EvBOZxsCzSUBXsE0：[#d061d]，Q22xgxoMxWOVJ9yH7Fx0：[#61367]，hWtHgAsf5GFWASsB8DGw：[#8fe0d]，sxRbMsr3H249mZinYuWl：[#85724]}

为什么我从一个打印语句中得到 2 组键值对，并显示具有不同值的完全相同的键？我只有 5 个键值对数据，但现在得到 10 个键值对数据值。这可能会说明问题，但不知道这是如何发生的。下面是我的代码片段，用于检索用作下拉菜单项的数据。

Map<String, Key> dropdownKeys = {};
    for (var cat in categoryList) {
      dropdownKeys[cat.id] = UniqueKey();
    }
    List<DropdownMenuItem<String>> dropdownMenuItems = [];
    for (var cat in categoryList) {
      dropdownMenuItems.add(
        DropdownMenuItem(
          key: dropdownKeys[cat.id],
          value: cat.id,
          child: Row(
            children: [
              Icon(
                Icons.check,
                color: Colors.white,
                size: Device.screenType == ScreenType.mobile ? 16.sp : 20.sp,
              ),
              SizedBox(
                width: 3.w,
              ),
              Text(
                cat.name,
                style: TextStyle(
                  color: Colors.white,
                  fontSize:
                      Device.screenType == ScreenType.mobile ? 16.sp : 20.sp,
                ),
              ),
            ],
          ),
        ),
      );
    }
    print(dropdownKeys);

Answer 1

重新初始化 productCategory 变量，以确保从 firebase 中获取它时，它的第一个值在 dropDownMenuItems 中。

Changed final String productCategory = 'Category"; to String? productCategory; 问题解决了。