微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦！

MobX 和 setState() 或 markNeedsBuild() 在构建异常期间调用

分类：编程问答

如何解决MobX 和 setState() 或 markNeedsBuild() 在构建异常期间调用

在我们应用的几个地方有这样的例外：

EXCEPTION CAUGHT BY FlutteR_MOBX 
The following MobXCaughtException was thrown:
setState() or markNeedsBuild() called during build.
This Observer widget cannot be marked as needing to build because the framework is already in the
process of building widgets.  A widget can be marked as needing to be built during the build phase
only if one of its ancestors is currently building. This exception is allowed because the framework
builds parent widgets before children,which means a dirty descendant will always be built.
Otherwise,the framework might not visit this widget during this build phase.
The widget on which setState() or markNeedsBuild() was called was:
  Observer
The widget which was currently being built when the offending call was made was:
  Builder

When the exception was thrown,this was the stack:
#0      Element.markNeedsBuild.<anonymous closure> (package:Flutter/src/widgets/framework.dart:4292:11)
#1      Element.markNeedsBuild (package:Flutter/src/widgets/framework.dart:4307:6)
#2      ObserverElementMixin.invalidate (package:Flutter_mobx/src/observer_widget_mixin.dart:70:24)
#3      ReactionImpl._run (package:mobx/src/core/reaction.dart:119:22)
#4      ReactiveContext._runReactionsInternal (package:mobx/src/core/context.dart:345:18)
#5      ReactiveContext.runReactions (package:mobx/src/core/context.dart:319:5)
#6      ReactiveContext.endBatch (package:mobx/src/core/context.dart:149:7)
#7      ActionController.endAction (package:mobx/src/core/action.dart:107:9)
#8      _$CatalogState.changeCatalogIndex (package:my_app/catalog/state/catalog_state.g.dart:37:43)
#9      _CatalogViewState.initState (package:my_app/catalog/catalog_view.dart:277:19)
#10     StatefulElement._firstBuild (package:Flutter/src/widgets/framework.dart:4765:58)
#11     ComponentElement.mount (package:Flutter/src/widgets/framework.dart:4601:5)
...     normal element mounting (112 frames)
#123    Element.inflateWidget (package:Flutter/src/widgets/framework.dart:3569:14)
#124    Element.updateChild (package:Flutter/src/widgets/framework.dart:3327:18)
#125    RenderObjectElement.updateChildren (package:Flutter/src/widgets/framework.dart:5705:32)
#126    MultiChildRenderObjectElement.update (package:Flutter/src/widgets/framework.dart:6246:17)
#127    Element.updateChild (package:Flutter/src/widgets/framework.dart:3314:15)
#128    ComponentElement.performRebuild (package:Flutter/src/widgets/framework.dart:4652:16)
#129    StatefulElement.performRebuild (package:Flutter/src/widgets/framework.dart:4800:11)
#130    Element.rebuild (package:Flutter/src/widgets/framework.dart:4343:5)
#131    StatefulElement.update (package:Flutter/src/widgets/framework.dart:4832:5)
#132    Element.updateChild (package:Flutter/src/widgets/framework.dart:3314:15)
#133    ComponentElement.performRebuild (package:Flutter/src/widgets/framework.dart:4652:16)
#134    Element.rebuild (package:Flutter/src/widgets/framework.dart:4343:5)
#135    ProxyElement.update (package:Flutter/src/widgets/framework.dart:4987:5)
#136    _InheritednotifierElement.update (package:Flutter/src/widgets/inherited_notifier.dart:183:11)
#137    Element.updateChild (package:Flutter/src/widgets/framework.dart:3314:15)
#138    SingleChildRenderObjectElement.update (package:Flutter/src/widgets/framework.dart:6125:14)
#139    Element.updateChild (package:Flutter/src/widgets/framework.dart:3314:15)
#140    ComponentElement.performRebuild (package:Flutter/src/widgets/framework.dart:4652:16)
#141    StatefulElement.performRebuild (package:Flutter/src/widgets/framework.dart:4800:11)
#142    Element.rebuild (package:Flutter/src/widgets/framework.dart:4343:5)
#143    StatefulElement.update (package:Flutter/src/widgets/framework.dart:4832:5)
#144    Element.updateChild (package:Flutter/src/widgets/framework.dart:3314:15)
#145    SingleChildRenderObjectElement.update (package:Flutter/src/widgets/framework.dart:6125:14)
#146    Element.updateChild (package:Flutter/src/widgets/framework.dart:3314:15)
#147    SingleChildRenderObjectElement.update (package:Flutter/src/widgets/framework.dart:6125:14)
#148    Element.updateChild (package:Flutter/src/widgets/framework.dart:3314:15)
#149    ComponentElement.performRebuild (package:Flutter/src/widgets/framework.dart:4652:16)
#150    Element.rebuild (package:Flutter/src/widgets/framework.dart:4343:5)
#151    StatelessElement.update (package:Flutter/src/widgets/framework.dart:4708:5)
#152    Element.updateChild (package:Flutter/src/widgets/framework.dart:3314:15)
#153    ComponentElement.performRebuild (package:Flutter/src/widgets/framework.dart:4652:16)
#154    Element.rebuild (package:Flutter/src/widgets/framework.dart:4343:5)
#155    ProxyElement.update (package:Flutter/src/widgets/framework.dart:4987:5)
#156    Element.updateChild (package:Flutter/src/widgets/framework.dart:3314:15)
#157    ComponentElement.performRebuild (package:Flutter/src/widgets/framework.dart:4652:16)
#158    StatefulElement.performRebuild (package:Flutter/src/widgets/framework.dart:4800:11)
#159    Element.rebuild (package:Flutter/src/widgets/framework.dart:4343:5)
#160    BuildOwner.buildScope (package:Flutter/src/widgets/framework.dart:2730:33)
#161    WidgetsBinding.drawFrame (package:Flutter/src/widgets/binding.dart:913:20)
#162    RendererBinding._handlePersistentFrameCallback (package:Flutter/src/rendering/binding.dart:302:5)
#163    SchedulerBinding._invokeFrameCallback (package:Flutter/src/scheduler/binding.dart:1117:15)
#164    SchedulerBinding.handleDrawFrame (package:Flutter/src/scheduler/binding.dart:1055:9)
#165    SchedulerBinding._handleDrawFrame (package:Flutter/src/scheduler/binding.dart:971:5)
#169    _invoke (dart:ui/hooks.dart:251:10)
#170    _drawFrame (dart:ui/hooks.dart:209:3)
(elided 3 frames from dart:async)

有时可以通过使用 SchedulerBinding.instance.addPostFrameCallback 推迟状态修改来避免此类错误。我不喜欢这样的解决方案，但至少没有错误。但是代码中有一些地方这个 hack 不起作用。 我真的很想了解如何在没有黑客的情况下处理它。问题是我无法提供可重现的代码，因为我无法在简单的演示应用程序中重现此行为。我不知道为什么。 _CatalogViewState 看起来像这样：

class _CatalogViewState extends State<CatalogView> {
  PageController _pageController;
  TabController _tabController;

  Productsstate _productsstate;
  FarmeRSState _farmeRSState;
  TouRSState _touRSState;
  dishesstate _dishesstate;
  CatalogState _catalogState;
  Categoriesstate _categoriesstate;
  FilteRSState _filteRSState;
  GeoState _geoState;

  int get _index() => _catalogState.catalogIndex;

  // ...
 
  @override
  void initState() {
    super.initState();
    _productsstate = Provider.of<Productsstate>(context,listen: false);
    _farmeRSState = Provider.of<FarmeRSState>(context,listen: false);
    _touRSState = Provider.of<TouRSState>(context,listen: false);
    _dishesstate = Provider.of<dishesstate>(context,listen: false);
    _catalogState = Provider.of<CatalogState>(context,listen: false);
    _categoriesstate = Provider.of<Categoriesstate>(context,listen: false);
    _filteRSState = Provider.of<FilteRSState>(context,listen: false);
    _geoState = Provider.of<GeoState>(context,listen: false);
    if (widget.defaultCategorySlug != null) {
      SchedulerBinding.instance.addPostFrameCallback((_) => _initDefaultSelectedCategory());
    }
    _clearEmptydishesCategories(); 
    _catalogState.changeCatalogIndex(widget.defaultIndex);
    _pageController = PageController(initialPage: _index);
    _pageController.addListener(_switchTabColor);
  }

  // ...
}

和 CatalogState 类似：

class CatalogState = _CatalogStateBase with _$CatalogState;

abstract class _CatalogStateBase with Store {
  @observable
  int catalogIndex = 0;

  @action
  void changeCatalogIndex(int index) {
    catalogIndex = index;
  }
}

奇怪的是，当我打开 CatalogView 时并没有抛出错误，但是如果我打开目录视图项目，然后在项目详细信息页面上，我返回目录视图页面就会发生错误。在这种情况下，Flutter 会创建一个全新的 CatalogView，并且不断出现错误。

某处发现我应该只在反应期间更换商店。但在这种情况下，我应该选择什么反应？此外，我只需要运行此代码一次。我试过自动运行反应，但它只是破坏了代码，没有任何东西可以正常工作。

如果我不能在 initState 中改变存储（尽管在大多数情况下它运行良好），那么它的替代位置在哪里？

我也试过这个：

autorun((_) => _catalogState.catalogIndex,(int index){
   _catalogState.changeCatalogIndex(widget.defaultIndex);
});

还有这个：

untracked(() {
  _catalogState.changeCatalogIndex(widget.defaultIndex);
});

但没有运气(。奇怪的是 untracked 失败了，因为未跟踪的存储更改不应启动失效过程。

感觉就像在父小部件构建阶段调用 initState 的情况一样。这就是错误发生的原因。

任何有关如何调试和修复的帮助或想法表示赞赏。

解决方法

当您在 initState 中尝试触发重建时会发生此错误。如果您想在 init 逻辑上触发重建，您可以将该重建触发器包装在 postFrameCallback 中。在这种情况下，我认为问题出在 catalogState。

@override
  void initState() {
    super.initState();
    _productsState = Provider.of<ProductsState>(context,listen: false);
    _farmersState = Provider.of<FarmersState>(context,listen: false);
    _toursState = Provider.of<ToursState>(context,listen: false);
    _dishesState = Provider.of<DishesState>(context,listen: false);
    _catalogState = Provider.of<CatalogState>(context,listen: false);
    _categoriesState = Provider.of<CategoriesState>(context,listen: false);
    _filtersState = Provider.of<FiltersState>(context,listen: false);
    _geoState = Provider.of<GeoState>(context,listen: false);
    if (widget.defaultCategorySlug != null) {
      SchedulerBinding.instance.addPostFrameCallback((_) => _initDefaultSelectedCategory());
    }
    _clearEmptyDishesCategories(); 
    // this triggers a rebuild 
    // _catalogState.changeCatalogIndex(widget.defaultIndex);
    // you can do this in the first frame after initial build
    WidgetsBinding.instance.addPostFrameCallback((_) => _catalogState.changeCatalogIndex(widget.defaultIndex));
    _pageController = PageController(initialPage: _index);
    _pageController.addListener(_switchTabColor);
  }

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。

苹果市值2025年有望达4万亿美元
pythonJavaScriptjavaHTMLPHPreactjsC#AndroidCSSNode.jssqlrpython-3.xMysqLjQueryc++pandasFlutterangularIOSdjangolinuxswifttypescript路由器JSON路由器设置无线路由器h3c华三华三路由器设置华三路由器电脑软件教程arraysdocker软件图文教程Cvue.jslaravelspring-boot