首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
社区首页 >问答首页 >颤动阻塞-从阻塞向小部件发送错误状态

颤动阻塞-从阻塞向小部件发送错误状态
EN

Stack Overflow用户
提问于 2020-01-07 13:19:17
回答 1查看 663关注 0票数 1

它看起来像是程序块v0.11.2中的错误

我有以下事件/状态:

代码语言:javascript
运行
AI代码解释
复制
class DeleteReceipt extends ReceiptEvent {
  final Receipt receipt;
  DeleteReceipt(this.receipt) : super([receipt]);
}

class ReceiptDeleted extends ReceiptState {
  final Receipt receipt;
  ReceiptDeleted(this.receipt) : super();
}

和下面的代码块:

代码语言:javascript
运行
AI代码解释
复制
if (event is DeleteReceipt) {
  var delReceipt = event.receipt;
  await _receiptDao.delete(delReceipt);
  print("deleting: " + delReceipt.snapshot.documentID);
  yield ReceiptDeleted(delReceipt);
}

和我的小部件:

代码语言:javascript
运行
AI代码解释
复制
      if (state is ReceiptDeleted) {
        print("delete: "+state.receipt.snapshot.documentID);
        receipts.delete(state.receipt);
      }

当我这样做的时候:第一次得到:_receiptBloc.dispatch(DeleteReceipt(receipt));

代码语言:javascript
运行
AI代码解释
复制
I/flutter (28196): deleting: AzgAzcn5wRNFVd7NyZqQ
I/flutter (28196): delete: AzgAzcn5wRNFVd7NyZqQ

这是正确的,但当我第二次对不同的收据执行_receiptBloc.dispatch(DeleteReceipt(receipt));时,我得到:

代码语言:javascript
运行
AI代码解释
复制
I/flutter (28196): deleting: d4oUjrGwHX1TvIDr9L2M
I/flutter (28196): delete: AzgAzcn5wRNFVd7NyZqQ

您可以看到,在第二次使用正确的值接收DeleteReceipt事件,但是使用错误的值接收ReceiptDeleted状态,然后它就像这样卡住了,它永远不会使用正确的值触发ReceiptDeleted状态,只使用第一个值。

我的应用程序不是微不足道的,我在过去设置了很多事件和状态,它没有出现任何问题(除了这个,可能是与flutter bloc state not received相关的)

基本上,我让用户创建收据的照片,这些照片是持久的(使用bloc/firestore),我想让用户删除它们,所以当用户单击收据时,它会在一个新的屏幕中打开:

代码语言:javascript
运行
AI代码解释
复制
Navigator.of(context).push(
  MaterialPageRoute(
    builder: (context) {
      return ReceiptDetailPage(widget.receipt);
    },
  ),

当用户单击delete时,我会显示一个对话框,如果为OK,则删除收据

代码语言:javascript
运行
AI代码解释
复制
var result = await showDialog(
  context: context,
  builder: (BuildContext dialogCtxt) {
    // return object of type Dialog
    return AlertDialog(
      title: new Text(AppLocalizations.of(context).deleteReceiptQuestion),
      actions: <Widget>[
        // usually buttons at the bottom of the dialog
        new FlatButton(
          child: new Text(AppLocalizations.of(context).cancel),
          onPressed: () {
            Navigator.of(dialogCtxt).pop("cancel");
          },
        ),
        new FlatButton(
          child: new Text(AppLocalizations.of(context).ok),
          onPressed: () {
            Navigator.of(dialogCtxt).pop("OK");
          },
        ),
      ],
    );
  },
);
if (result == 'OK') {
  Navigator.of(context).pop();
  _receiptBloc.dispatch(DeleteReceipt(receipt));
}
EN

回答 1

Stack Overflow用户

发布于 2020-01-07 13:33:54

解决方案:

添加状态/事件:

代码语言:javascript
运行
AI代码解释
复制
class EmptyState extends ReceiptState {}
class EmptyEvent extends ReceiptEvent {}

收到删除状态后,请执行以下操作:

代码语言:javascript
运行
AI代码解释
复制
      if (state is ReceiptDeleted) {
        print("delete: "+state.receipt.snapshot.documentID);
        receipts.delete(state.receipt);
        _receiptBloc.dispatch(EmptyEvent()); // add this line
      }

并将此内容添加到您的区块中

代码语言:javascript
运行
AI代码解释
复制
if (event is EmptyEvent) {
  yield EmptyState();
}

这将导致激发一个空事件和状态,并将清除问题

解释:我注意到,一旦我触发了一个状态,区块提供者就会在我每次更改屏幕时发送该状态,这很奇怪,因为应用程序多次收到Delete状态。在我的例子中,这不是问题,因为代码将尝试删除已经删除的元素,并将静默失败:

代码语言:javascript
运行
AI代码解释
复制
  void delete(Receipt receipt) {
    try {
      Receipt oldReceipt = receipts.firstWhere(
          (r) => r.snapshot.documentID == receipt.snapshot.documentID);
      receipts.remove(oldReceipt);
    } catch (e) {
      print(e);
    }
  }

注意:这似乎发生在应用程序正在触发的所有状态下,而不仅仅是Delete状态

因此,我邀请如果我将触发一个空事件,它将清除旧的Delete状态,并以某种方式修复该问题,而WALLA...

请注意,我并不需要在代码中的任何地方实际监听EmptyState

更多信息:

我意识到虽然bloc似乎是松散的状态,但我的设计也是错误的,因为数据结构应该在bloc中更新,一旦事件被接收,而不是在小部件中,当状态被接收时(或者在本例中没有接收,这会导致错误)

最初我使用blocsembast,但后来我想让数据与远程数据库同步,所以我用firestore代替了sembast

但这会导致加载时间从零到超过2秒,这是一个问题,因为在原始设计中,我在每次更新时从数据库加载所有数据。

所以我试着分别更新store和UI。我没有读取所有数据,而是在小部件中保留了一个列表,并在状态更改时更新小部件-每个更新/删除状态。

这是一个问题,因为许多状态都丢失了(特别是当用户单击fast时-这会导致许多事件/状态被触发)

所以我猜correct的解决方案应该是在一个单独的服务中管理内存中的数据,并在收到事件时更新数据,然后从服务而不是存储中读取所有数据(如果可能)

票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/59629235

复制
相关文章
html5设置table样式_原生js添加样式
版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。
全栈程序员站长
2022/11/05
14.7K0
【HTML5】HTML5 新增 input 表单 ( 邮箱输入表单 | 网址输入表单 | 日期输入表单 | 时间输入表单 | 电话输入表单 | 搜索栏输入表单 | 颜色选择器输入表单 )
一、HTML5 新增 input 表单 ---- HTML5 新增 input 表单 : 邮箱输入表单 : 必须输入邮箱 , 如果输入格式错误 , 提交时会在对话框中报错 ; <input type="email" /> URL 输入表单 : 只能输入网址 , 格式错误会在对话框中报错 ; <input type="url" /> 日期输入表单 : 右侧的下拉菜单选择日期 ; 如果在手机中打开 , 会弹出手机中自带的日期选择对话框 ; <input type="date" /> 时间输入表
韩曙亮
2023/04/24
3.4K0
【HTML5】HTML5 新增 input 表单 ( 邮箱输入表单 | 网址输入表单 | 日期输入表单 | 时间输入表单 | 电话输入表单 | 搜索栏输入表单 | 颜色选择器输入表单 )
EasyNVR前端构建之输入框样式的调整
起初我们的界面设计是为了满足功能的需求就是 ,用户可以输入激活码提交,完成永久授权。 在实际的应用过程中我们发现由于输入框自身大小的原因,我们的机器码有事无法完全展示给用户,不方便用户的自我检查激活码是否准确。因此我们考虑使用可以方便拉伸改变大小的输入框。
EasyNVR
2020/04/23
9790
EasyNVR前端构建之输入框样式的调整
WordPress 后台样式:输入框 input class
我们在 WordPress 后台创建表单的时候,可以使用一些预定义好的 class 来定义输入框的宽度,而不需自己写样式,下图就是常用的输入框样式的效果:
Denis
2023/04/14
7400
WordPress 后台样式:输入框 input class
bootstrap 输入框组 常用搜索框样式
div input-group span input-group-addon <div style="padding: 100px 100px 10px;"> <form class="bs-example bs-example-form" role="form"> <div class="input-group"> <span class="input-group-addon">@</span> <input type="text" class="form-control" placeholder="twitterhandle"> </div> <div class="input-group"> <input type="text" class="form-control"> <span class="input-group-addon">.00</span> </div> <div class="input-group"> <span class="input-group-addon">$</span> <input type="text" class="form-control"> <span class="input-group-addon">.00</span> </div> </form> </div>
用户5760343
2019/07/05
3.1K0
bootstrap 输入框组  常用搜索框样式
html5数字和颜色输入框
效果:http://hovertree.com/code/html5/rxujb6g8.htm
全栈程序员站长
2022/07/15
2.6K0
防止vue文件中的样式出现‘污染’情况(html5 scoped特性)
在vue中,如果把样式写在vue文件的 style中,可能会出现样式污染的情况,这是要把写样式的标签
lin_zone
2018/08/15
8760
DataList:HTML5中的input输入框自动提示利器
DataList的作用是在你往input输入框里输入信息时,根据你敲进去的字母,自动显示一个提示下列列表,很像百度或谷歌的搜索框的自动提示,在飞机票火车票的搜索页面上也有这样的效果。它是HTML5里新增的一个非常有用的元素。
ZhangXianSheng
2019/05/28
3.5K0
Excel实战技巧66:创建向导样式的数据输入窗体4
在HRWizard用户窗体中输入的一些数据是通过组合框控件显示给用户的。HRWizard工作簿文件包含一个名为ListMgr的工作表,其中包含每个列表的数据,这些数据存储在ListMgr工作表的命名区域。
fanjy
2019/12/10
1.3K0
Excel实战技巧66:创建向导样式的数据输入窗体4
Excel实战技巧66:创建向导样式的数据输入窗体3
上文中,我们完成了用户窗体界面的设计。接下来,设置一些类来使用户窗体工作。在一开始,你可能会认为一个与数据记录相联系的类就满足要求了,但我们将在定义类时分解功能,设计一两个类帮助定义向导步骤。最终,将实现一个灵活的向导应用程序,提供非常容易修改步骤的顺序的能力,甚至添加一个步骤也相当简单。
fanjy
2019/12/10
6860
Excel实战技巧66:创建向导样式的数据输入窗体3
Excel实战技巧66:创建向导样式的数据输入窗体2
4.在用户窗体顶部添加标签,将其Caption属性设置为:MyCompany– HRWizard,设置字体为大尺寸,例如18pt。
fanjy
2019/12/10
1K0
Excel实战技巧66:创建向导样式的数据输入窗体2
Excel实战技巧66:创建向导样式的数据输入窗体6
运行用户窗体,我们在向导中的每一界面输入数据,并将其保存到EmpData工作表中。
fanjy
2019/12/11
6900
Excel实战技巧66:创建向导样式的数据输入窗体6
Excel实战技巧66:创建向导样式的数据输入窗体1
引言:本文来源于Jim DeMarco的《Pro Excel 2007 VBA》第4章的示例,详细讲解了如何使用用户窗体来制作一个向导样式的数据输入窗体,非常适合于学习使用VBA来创建用户窗体的知识和技巧,也为制作向导样式的用户窗体界面提供了参考模板。
fanjy
2019/12/06
1.2K0
Excel实战技巧66:创建向导样式的数据输入窗体5
到目前为止,我们已经完成了最艰难的工作。接下来,我们来编写用户窗体代码,将已完成的对象放进HRWizard用户窗体里并使这些对象工作。
fanjy
2019/12/11
1.7K0
Excel实战技巧66:创建向导样式的数据输入窗体5
HTML5 - 虚拟键盘出现挡住输入框的解决办法
我们使用 H5 做移动 App,或者进行移动网站开发时。如果文本输入框在整个页面的下方,当我们点击输入框要输入文字时,系统弹出的虚拟键盘就会将输入框给挡住。(这个只有在Android 系统下会有这个问题,iOS 系统会自动将整个页面上移动。)
ZhangXianSheng
2019/05/28
2.2K0
HTML5 中 input 如何实现只能输入浮点数
我们知道 HTML5 中的 input 标签支持 number 的类型,支持只能输入数字:
Denis
2023/04/14
1.1K0
IOS应用提交所需的ICON
如果提交的ipa包中,未包含必要的Icon就会收到类似的通知,为什么偏偏是Icon-76呢?
meteoric
2018/11/19
8690
怎样快速搜索自己所需的资料?
摘要:我不敢保证现在100%的大学生不会使用互联网快速搜索自己所需的资料,但我绝对敢保证有70%~90%大学生不会使用此方法进行快速搜索自己所需的资料。本文以百度为例,分享三个重要技巧。 一、关键词:
用户1756920
2018/06/20
1.6K0
企业面试题: HTML5中新的输入类型属性你知道哪些
search:用于搜索域,比如站点搜索或 Google 搜索,域显示为常规的文本域。
舒克
2019/08/09
6240
软件测试所需要掌握的技能
1.在测试中最重要的文档,他是测试工作的核心,是一组在测试时输入输出的标准,是软件需求的具体对照。编写测试用例,是测试人员的基本功,真正能写好的人并不多。
用户7880705
2020/12/28
1K0

相似问题

PHP:类中的静态只读属性

31

如何在Javascript类中声明只读静态属性?

20

添加静态只读属性时导致错误的静态常量类

12

如何重置只读静态属性?

12

C#中的静态只读和静态只读

50
添加站长 进交流群

领取专属 10元无门槛券

AI混元助手 在线答疑

扫码加入开发者社群
关注 腾讯云开发者公众号

洞察 腾讯核心技术

剖析业界实践案例

扫码关注腾讯云开发者公众号
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档