ObservableList<Object> 在添加新对象时覆盖来自其他对象的值答案

【问题标题】：ObservableList<Object> overwriting values from other objects when adding a new objectObservableList<Object> 在添加新对象时覆盖来自其他对象的值
【发布时间】：2020-04-21 18:31:08
【问题描述】：

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

我有一个名为 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 类有一个 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;

}

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

当添加相同的产品但具有不同的 optionSelected 和数量时： https://i.imgur.com/vlgKkq5.mp4

【问题讨论】：

你能在沙箱中提供代码吗？
我忘了提，所以我现在添加了，我正在使用 get_it lib 将 BaseStore 用作单例。我不确定我是否可以重现错误，实际上我对沙盒一无所知。
codesandbox.io/s

标签： list flutter singleton mobx

【解决方案1】：

朋友@bwolf，帮我解决问题，我不得不使用 copyWith 为我选择的每个 Product 生成一个新的对象实例，也使用 copyWith 来生成 Option 类。

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();
    }

  }

【讨论】：