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

Question

我正在开发一个餐厅送货应用程序，将相同的产品添加到列表中但值不同时会遇到问题，它会覆盖旧产品的值。

我有一个名为BaseStore的商店，该商店具有“ Bag”对象作为可观察对象。

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类具有一个Product对象的ObservableList。

class Bag {
    ObservableList<Product> products;
}

Product类具有更多变量，但在示例中仅显示这两个变量：

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

}

class Option {
    String optionSelected;
   List<ItemOption>

}

class ItemOption {
    String name;

}

我正在尝试添加两个产品，两个产品的值都相同，唯一的区别是“ Option”类中的字符串“ 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

当我添加具有相同值的第二个产品时，除了内部列表中的一个值（Option's optionSelected）之外，它会根据最后添加的内容更改列表中的所有产品值。

添加其他产品，某些不同值的示例，不会发生此问题：https://i.imgur.com/ULzdPRM.mp4

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

Answer 1

[一个朋友，@ bwolf，帮助我解决了这个问题，我不得不使用copyWith为我选择的每个产品生成一个新的对象实例，也为option类也使用了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({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();
    }

  }