Flutter：如何将值动态映射到列表并迭代到其长度，以及如何在映射值后进行更新和删除

Question

我正在尝试通过 dart 编程为我的应用程序构建 json 预期输出，如下所示，我已成功将数据映射到列表。但是当我尝试删除/添加列表时，列表中的元素没有相应更新，而是重复相同的数据。

这是我的代码实现 - 在这种设置状态下，我得到所需的值，如电话、姓名、电子邮件等

for (int i = 0; i <= selectedContacts.length - 1; i++) {
        SimplifiedContact? contact = selectedContacts.elementAt(i);

        CreateContestModel(//<-- from here i am getting required values.
          contact.phone, 
          contact.name,
          contact.email,
        );
      }

在此代码中，我正在映射数据并构建 JSON：

class CreateContestModel {

  static List models = [];

  String phone = '';
  String name = '';
  String email;

   CreateContestModel(this.phone, this.name, this.email) {
      var invitemap = {
      'name': name,
      'phone': phone,
      'email': email,
    };

    models.add(invitemap);
    print(models);
   }

}

输出：

{
   "invitations":[
      {
         "name":"Acevedo Castro",
         "phone":982-475-2009,
         "email":"[email protected]"
      },
      {
         "name":"Acevedo Castro",
         "phone":982-475-2009,
         "email":"[email protected]"
      },
      {
         "name":"Abby Webster",
         "phone":888-561-2141,
         "email":"[email protected]"
      },
      {
         "name":"Abby Webster",
         "phone":888-561-2141,
         "email":"[email protected]"
      },
      {
         "name":"Abby Webster",
         "phone":888-561-2141,
         "email":"[email protected]"
      }
   ]
}

如您所见，上面的项目没有更新，但它们正在添加更多。

预期输出：

{
   "invitations":[
      {
         "name":"Acevedo Castro",
         "phone":"982-475-2009",
         "email":"[email protected]"
      },
      {
         "name":"Abby Webster",
         "phone":"888-561-2141",
         "email":"[email protected]"
      }
   ]
}

Answer 1

这是一些有严重缺陷的程序流程。作为副作用，您的对象创建同时会填充静态列表。看来您将对象创建称为“每个构建”。因此，每当用户翻转手机或拖动浏览器窗口时，您都会将其插入到列表中。 我不完全确定你想要什么，但你的应用程序需要状态管理。有不同的方法可以做到这一点，您可以从

Flutter状态管理文档

中选择您最喜欢的一种。 这是一个巨大的流程问题，您永远不应该在

build()

Answer 2

因此，操作数据的正确方法是在使用数据之前，因此请确保仅在

initstate()

中操作数据。就您而言，您也在做一些不需要的事情。您正在尝试通过静态列表的构造函数将数据添加到列表中，因此每当您调用它时它总是会添加数据，这不是正确的方法。

class CreateContestModel {
  late String phone = '';
  late String name = '';
  late String email;

  CreateContestModel.fromMap(Map<String, String> json) {
    phone = json['phone'] ?? '';
    phone = json['name'] ?? '';
    phone = json['email'] ?? '';
  }
}

这就是您创建班级的方式。如果可能的话，总是创建用于操作的函数。

  List<CreateContestModel> createContestModelList =
      testData['invitations']!.map(
    (data) {
      return CreateContestModel.fromMap(data);
    },
  ).toList();

然后使用此代码在

initstate()

 中构建您的列表，并在有状态小部件中使用静态变量来操作它。确保您没有在 

build()

函数上构造数据。

需要更多帮助？这是

要点链接

根据我的问题，我找到了一些解决方法，即通过清除选择或更新现有联系人的堆栈，因为如下所述

Answer 3

for (int i = 0; i <= selectedContacts.length - 1; i++) { //<--- for every time same elements will be itrated
        SimplifiedContact? contact = selectedContacts.elementAt(i);

        CreateContestModel(//<-- from here i am getting required values.
          contact.phone, 
          contact.name,
          contact.email,
        );
      } 

因此，集合列表不会按照问题中提到的显示列表进行更新，因此我在选择/更新联系人时在下面的代码中做了一些工作，因为我的模型是静态列表

void onContactBtnPress(BuildContext context) async { CreateContestModel.models.clear(); //<-- clearing up stack
}