Flutter/Dart - 无法修改不可修改的地图错误

Question

我使用 Flutter bloc 包创建了一个应用程序。我创建了一个名为learning_dashboard_screen 的屏幕，其中包含从服务器获取的列表。在同一屏幕内，我有一个过滤器按钮，按下该按钮将使用底部工作表小部件显示过滤器屏幕。

它有不同的类别可供过滤列表。在learning_dashboard_screen_state屏幕中，我有一个名为filteroptions的Map，其类型为Map <String，Map <String，dynamic>>。该映射用于通过将映射与复选框小部件映射来填充复选框。

part of 'learning_dashboard_screen_bloc.dart';

class LearningDashboardScreenState extends Equatable {
  static ScrollController controller = ScrollController();
  final int courseLimit = 3;
  final List<GPaginatedCoursesData_paginatedCourses_data> courses;
  final DataRetrievalStatus initialCoursesStatus;
  final Map<String, Map<String, dynamic>> filterOption;
 Map<String, Map<String, dynamic>> getFilterOption() {
    return filterOption;
 }

  final int currPage;
  final bool hasNextPage;
  final DataRetrievalStatus moreCoursesStatus;

  LearningDashboardScreenState(
     {this.courses = const [],
     this.initialCoursesStatus = DataRetrievalStatus.NOT_INITIALIZED,
     this.filterOption = const {
      "Certificate Provider": {"NVQ": false, "City and Guilds": false},
      "Course Language": {"Sinhala": false, "English": false, "Tamil": false},
      "Duration": {"6 Months": false, "8 Months": false, "1Year": false},
      "Category": {
        "Baby Care": false,
         "First Aid": false,
          "Adult Care": false,
          "Mental Care": false,
          "Physiotherapy": false,
          "Baby First Aid": false,
          "Light Housekeeping": false,
           "Assist Methods": false
         }
       },
       this.currPage = 0,
       this.hasNextPage = false,
       this.moreCoursesStatus = DataRetrievalStatus.NOT_INITIALIZED});

      @override
      List<Object?> get props => [
       courses,
       filterOption,
      initialCoursesStatus,
      courseLimit,
      currPage,
      hasNextPage,
      moreCoursesStatus
     ];

   LearningDashboardScreenState copyWith(
        {List<GPaginatedCoursesData_paginatedCourses_data>? course,
         DataRetrievalStatus? courseStatus,
         int? currPage,
         bool? hasNextPage,
         Map<String, Map<String, dynamic>>? filterOption,
         DataRetrievalStatus? moreCourseStatus}) {
        return LearningDashboardScreenState(
          courses: course ?? this.courses,
          filterOption: filterOption ?? this.filterOption,
          initialCoursesStatus: courseStatus ?? this.initialCoursesStatus,
          currPage: currPage ?? this.currPage,
          hasNextPage: hasNextPage ?? this.hasNextPage,
           moreCoursesStatus: moreCourseStatus ?? this.moreCoursesStatus);
         }

         ScrollController getScrollController() {
           return controller;
         }
       }

我想要的是根据复选框值更改状态中filteroption映射的布尔值。为此，我所做的是，

1.我在事件类中创建了一个事件，

  class CheckBoxValueChangedEvent extends LearningDashboardScreenEvent {
   String filterOption;
   String filterValue;
   bool isChecked;


  CheckBoxValueChangedEvent({required this.filterOption,required this.filterValue,required 
     this.isChecked});

  @override
   List<Object?> get props => [];
  }

2. 我在按下复选框时调用了该事件

               CheckBox(
                  label: entry.key,
                  onChanged: (isChecked) {
                     context
                  .read<LearningDashboardScreenBloc>()
                  .add(CheckBoxValueChangedEvent(filterOption: widgetName, filterValue: 
                   entry.key, isChecked: isChecked));
   
            },
            key: GlobalKey<CheckBoxState>(),
            initValue: entry.value,
          ),
   

3.在 bloc 类中，我编写了函数来更改状态类中的 bool 值并发出状态，

void _onCheckBoxValueChangedEvent(CheckBoxValueChangedEvent event,
  Emitter<LearningDashboardScreenState> emit) {
Map<String, Map<String, dynamic>> filterOption = {};
filterOption=new Map<String, Map<String, dynamic>>.from(state.filterOption);
if (event.isChecked = true) {
  filterOption[event.filterOption]![event.filterValue] = true;
} else {
  filterOption[event.filterOption]![event.filterValue] = false;
}
emit(state.copyWith(filterOption: filterOption));

}

我的问题是当我勾选一个复选框时，

Error: Unhandled error Unsupported operation: Cannot modify unmodifiable map occurred in 
 Instance of 'LearningDashboardScreenBloc'.

Answer 1

问题是，当您声明地图时，const您无法修改地图。

在您的构造函数中filterOption有一个默认值const：

LearningDashboardScreenState(
   {this.courses = const [],
   this.initialCoursesStatus = DataRetrievalStatus.NOT_INITIALIZED,
   this.filterOption = const {
     "Certificate Provider": {"NVQ": false, "City and Guilds": false},
     "Course Language": {"Sinhala": false, "English": false, "Tamil": false},
     "Duration": {"6 Months": false, "8 Months": false, "1Year": false},
     "Category": {
       "Baby Care": false,
       "First Aid": false,
       "Adult Care": false,
       "Mental Care": false,
       "Physiotherapy": false,
       "Baby First Aid": false,
       "Light Housekeeping": false,
       "Assist Methods": false
     },
   },
   this.currPage = 0,
   this.hasNextPage = false,
   this.moreCoursesStatus = DataRetrievalStatus.NOT_INITIALIZED}
);

一种可能的解决方法是在初始化列表中定义映射文字，而不是作为默认参数（这样它就不需要是 const）。

LearningDashboardScreenState(
   {this.courses = const [],
   this.initialCoursesStatus = DataRetrievalStatus.NOT_INITIALIZED,
   Map<String, Map<String, dynamic>>? filterOption,
   this.currPage = 0,
   this.hasNextPage = false,
   this.moreCoursesStatus = DataRetrievalStatus.NOT_INITIALIZED}
): this.filterOption = filterOption ??
            {
              "Certificate Provider": {"NVQ": false, "City and Guilds": false},
              "Course Language": {
                "Sinhala": false,
                "English": false,
                "Tamil": false
              },
              "Duration": {
                "6 Months": false,
                "8 Months": false,
                "1Year": false
              },
              "Category": {
                "Baby Care": false,
                "First Aid": false,
                "Adult Care": false,
                "Mental Care": false,
                "Physiotherapy": false,
                "Baby First Aid": false,
                "Light Housekeeping": false,
                "Assist Methods": false
              }
            };