Flutter服务端驱动UI：多广告组件数据被覆盖问题求助

你遇到的核心问题是Bloc状态中用单个变量存储同类型组件的数据，多个广告模块共享同一变量，后续API请求返回的数据会覆盖之前的结果，导致所有同类型组件都显示最后一次请求的数据。以下是针对性的解决方案：

1. 重构Bloc状态的数据存储结构 #

把原来单个的advertiseSectionData改为键值对Map，用每个广告模块的唯一标识（比如组件ID、接口路径）作为key，对应存储该模块的API响应数据，避免数据覆盖。

修改后的State示例：

class HomeBodyDataState extends Equatable {
  // 替换原单个advertiseSectionData为Map结构
  final Map<String, Either<ValueFailures, HeaderImagesList>> advertiseSectionDataMap;

  const HomeBodyDataState({
    this.advertiseSectionDataMap = const {},
    // 保留原有其他状态字段...
  });

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

  // 实现状态复制，确保Map不可变更新
  HomeBodyDataState copyWith({
    Map<String, Either<ValueFailures, HeaderImagesList>>? advertiseSectionDataMap,
    // 其他字段的copyWith参数...
  }) {
    return HomeBodyDataState(
      advertiseSectionDataMap: advertiseSectionDataMap ?? this.advertiseSectionDataMap,
      // 其他字段赋值逻辑...
    );
  }
}

2. 调整Bloc事件与状态更新逻辑 #

新增带唯一标识的事件，确保每个广告模块的API请求结果存入Map对应位置，而非覆盖整个变量。

新增Event类： #

class LoadAdvertiseDataEvent extends HomeBodyDataEvent {
  final String uniqueKey; // 广告模块唯一标识（如组件ID/接口路径）
  final String endPoint;

  const LoadAdvertiseDataEvent({
    required this.uniqueKey,
    required this.endPoint,
  });

  @override
  List<Object> get props => [uniqueKey, endPoint];
}

修改Bloc事件处理逻辑： #

@override
Stream<HomeBodyDataState> mapEventToState(HomeBodyDataEvent event) async* {
  if (event is LoadAdvertiseDataEvent) {
    final result = await _repository.getAdvertiseData(endPoint: event.endPoint);
    // 不可变更新Map，插入当前模块的响应数据
    final updatedMap = Map<String, Either<ValueFailures, HeaderImagesList>>.from(state.advertiseSectionDataMap);
    updatedMap[event.uniqueKey] = result;
    yield state.copyWith(advertiseSectionDataMap: updatedMap);
  }
  // 保留原有其他事件处理逻辑...
}

3. 修改组件映射与数据绑定逻辑 #

在生成广告组件时，根据当前模块的唯一标识，从Map中取出对应的数据，而非读取单个变量。

修改toWidget方法：

Widget toWidget(Datum element, String widgetType, HomeBodyDataState state,) {
  switch (widgetType) {
    case AppStrings.advertiseSectionIdentifier:
      // 用当前组件的唯一标识作为key（需根据你的Datum模型实际字段调整，比如element.id或element.endPoint）
      final String uniqueKey = element.id;
      final advertiseData = state.advertiseSectionDataMap[uniqueKey];
      return Advertise(
        imagesList: advertiseData?.fold(
          () => null,
          (a) => a.fold(
            (l) => null,
            (r) => r.value.fold(
              (l) => null,
              (r) => r,
            ),
          ),
        ),
      );
    case AppStrings.sliderSectionIdentifier:
      // 保留原有滑块组件逻辑...
    default:
      return const SizedBox.shrink();
  }
}

4. 触发每个广告模块的API请求 #

在加载服务端组件配置后，遍历每个广告模块，触发对应的LoadAdvertiseDataEvent，带上唯一标识和接口路径：

// 获取服务端组件配置后执行
for (var element in serverUi) {
  if (element.keywords == AppStrings.advertiseSectionIdentifier) {
    // 需根据你的Datum模型实际字段传入唯一标识和接口路径
    context.read<HomeBodyDataBloc>().add(LoadAdvertiseDataEvent(
      uniqueKey: element.id,
      endPoint: element.endPoint,
    ));
  }
}
// 生成组件列表
final widgets = mapWidgets(serverUi, state);

内容的提问来源于stack exchange，提问作者Milan Makwana