ObservableList<Object> 添加新对象时覆盖其他对象的值

ObservableList<Object> overwriting values from other objects when adding a new object

我正在开发一个餐厅外卖应用程序,当我在列表中添加相同但具有不同值的产品时遇到问题,它会覆盖旧产品的值。

我有一个名为 BaseStore 的 Store,它有一个 "Bag" 对象作为 Observable。

abstract class _BaseStore with Store {

  @observable
  Bag bag = Bag(
      products: ObservableList<Product>()
  );

  @action
  addProduct(Product product){
  bag,products.add(products);
 }

}

我正在使用 get_it 包将 BaseStore 注册为 Singleton:https://pub.dev/packages/get_it

GetIt.I.registerSingleton<BaseStore>(BaseStore());

Bag class 有一个 Product 对象的 ObservableList。

class Bag {
    ObservableList<Product> products;
}

产品 class 有更多变量,但我只显示这两个作为示例:

class Product {
     String name;
     List<Option> options;

}

class Option {
    String optionSelected;
   List<ItemOption>

}

class ItemOption {
    String name;

}

我正在尝试添加两个产品,它们具有相同的值,唯一的区别是我在下面的示例中创建的 "Option" class 中的字符串 "optionSelected"两种产品,它们具有不同的 "optionSelected" 值(饮食和其他正常值)。

Product product1 = Product(
            name: "Coke",
            options: [
              Option(optionSelected: "Diet")
            ]
        );

 Product product2 = Product(
            name: "Coke",
            options: [
              Option(optionSelected: "Normal")
            ]
        );

我从单例调用操作并打印值。

GetIt.instance<BaseStore>().addProduct(product1);
GetIt.instance<BaseStore>().addProduct(product2);


    bag.products.forEach((product){

      product.options.forEach((option)=> print(option.optionSelected));

    });

它打印:

Normal
Normal

当我添加第二个具有所有相同值的产品时,除了内部列表中的一个值(选项的 optionSelected),它会根据最后添加的更改列表中的所有产品值。

示例当添加不同的产品时,一些不同的值,问题不会发生: https://i.imgur.com/ULzdPRM.mp4

添加相同的产品但选择的选项和数量不同时: https://i.imgur.com/vlgKkq5.mp4

朋友@bwolf 帮我解决了这个问题,我不得不使用 copyWith 为我选择的每个产品生成一个新的对象实例,也为选项 class 使用了 copyWith。

Product copyWith({
    String id,
    String restaurantId,
    String image,
    String name,
    String desc,
    int price,
    int quantity,
    String category,
    List<Option> options,
  }) =>
      Product(
        id: id ?? this.id,
        restaurantId: restaurantId ?? this.restaurantId,
        image: image ?? this.image,
        name: name ?? this.name,
        desc: desc ?? this.desc,
        price: price ?? this.price,
        quantity: quantity ?? this.quantity,
        category: category ?? this.category,
        options: options ?? this.options,
      );



Option copyWith({
    String id,
    String title,
    List<ItemOption> items,
    String optionSelected,
  }) =>
      Option(
        id: id ?? this.id,
        title: title ?? this.title,
        items: items ?? this.items,
        optionSelected: optionSelected ?? this.optionSelected,
      );

将产品传递到屏幕时:

products[index].copyWith()

在 Product 构造函数上。

 Product({this.id, this.restaurantId, this.image, this.name, this.desc,
    this.price, this.category,List<Option> options, this.quantity = 1}){

    if(options != null && options.isNotEmpty){
      this.options = options.map((e) => e.copyWith()).toList();
    }

  }