首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

在setInterval中,我每秒都在尝试更新可观察对象中的值,但mobx显示错误

在setInterval中,每秒都尝试更新可观察对象的值,但mobx显示错误的原因可能是因为在mobx中,只有在动作(action)中才能修改可观察对象的值。动作是一段被mobx追踪的代码,用于修改状态。在setInterval中,代码并没有被mobx追踪,因此会导致错误。

为了解决这个问题,可以使用mobx提供的runInAction函数来包装setInterval中的代码,以确保在动作中修改可观察对象的值。runInAction函数会告诉mobx这段代码是一个动作,从而避免错误。

以下是一个示例代码:

代码语言:txt
复制
import { observable, runInAction } from 'mobx';

class MyStore {
  @observable observableValue = 0;

  startUpdatingValue() {
    setInterval(() => {
      runInAction(() => {
        this.observableValue += 1;
      });
    }, 1000);
  }
}

const myStore = new MyStore();
myStore.startUpdatingValue();

在上面的示例中,我们使用了mobx的observable装饰器来定义可观察对象observableValue。然后,在startUpdatingValue方法中,我们使用setInterval来每秒更新observableValue的值。在setInterval的回调函数中,我们使用runInAction来包装修改observableValue的代码,确保它在动作中执行。

这样,mobx就能正确地追踪和更新observableValue的值,而不会出现错误。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

MobX管理状态(ES5实例描述)-4.常用工具方法

MobX是一个简单有效状态管理库,以派生(derive)概念为核心,以观察者模式为手段,达到了修改数据自动更新界面等目的 正因为其本身提供了包装react方法,可以简洁改善react组件,所以官网文档和几乎所有教程都以...react和ES7装饰修饰符等特性为切入点 MobX传统ES5环境也能良好工作,本文尝试以此为出发点,探讨既有的非react项目中直接引入MobX并用其整理重构老代码方法 没有babel、...和立即执行autorun不同是,该方法延迟minimumDelay毫秒才执行 如果被观察对象延迟期内多次改变,该方法也仅执行一次,这种情况下效果就类似runInAction了 适合于那些不需要经常执行...disposer();// 停止打印 4.3 expr expr()创建一个reaction临时派生,使得只满足其返回条件时,reaction才执行,从而避免不必要响应 var obj =...js结构 支持观察对象包括:数组、对象、map和基本类型 派生和其他不可枚举属性不会包含在结果 第二个参数设为false可以浅转换以提高性能 var obj = mobx.observable

99450

MobX 背后基础原理

更酷是,如果在事务结束之前使用了一个计算MobX 将会保证你得到一个更新! 实际上几乎没人明确使用事务, MobX 3 ,事务甚至被弃用了。因为 action 自动应用了事务。...但是,语义清晰 actions、计算和 reactions,没有陈旧可以被观察,所有派生运行在同一个栈 -- 相信这些事实将对一切做出改变。...当应用状态所有数据都在控制时候,自动可观察性是非常方便MobX 也是基于此开始开发。但有时你会发现世界不如你期望那么理想。...可以轻易 MobX 问题追踪器找出一些无意间将对象转为可观察对象引起非预期行为问题。... MobX 不通知观察者就无法升级数据,也会引入应用存在过期数据可能性,这就违背了 MobX 理念。人们有时希望有这种机制,但我还没遇到过概念上无法解决实际用例。

1.6K10

Mobx与Redux异同

很多情况下,状态对象和状态修改并没有必要绑定在一些组件上,我们可以尝试将其提升,通过组件树来得到与修改状态。...对于Mobx与Redux异同这个问题,是最近在找实习时候遇到,分别为react mobx与react redux作简单示例,文中示例代码都在https://codesandbox.io/s/...Mobx组件可以做到精准更新,将状态包装成可观察对象,一旦状态对象变更,就能自动获得更新。...Mobx则通常按模块将应用状态划分,多个独立store管理。 储存数据形式 Redux默认以JavaScript原生对象形式存储数据,这也就使得Redux需要手动追踪所有状态对象变更。...Mobx使用可观察对象,通常是使用observable让数据变化可以被观察,通过把属性转化成getter/setter来实现,当数据变更时将自动触发监听响应。

89620

MobX学习之旅

一、MobX MobX其实是一个比较轻便扩展状态管理工具,是一个由Facebook以及一些其他团队的人共同维护开源项目。...Observable 是被观察着和观察概念,你也可以理解为生产者和消费者概念 @observable/Observable 方法将对象所有属性重新克隆成新对象,并将克隆对象转变成可观察。...@observer就是在你订阅观察对象地方添加注释来监听对象更新 Observable 方法可以是如下类型: 1、object(原型是Object): Observable方法将该对象克隆成新对象并将属性转变成可观察...carName = observable.box('Infinity'); console.log(carName.get()); carName.set('ofo'); Computed 是定义相关一些数据发生变化时候自动更新...,当组件重新render时候会被触发,但在初始渲染前是不会被触发 onError mobx-react提供错误钩子函数来收集错误 用法: import { onError } from 'mobx-react

1.4K20

MobX管理状态(ES5实例描述)-3.常用API

MobX是一个简单有效状态管理库,以派生(derive)概念为核心,以观察者模式为手段,达到了修改数据自动更新界面等目的 正因为其本身提供了包装react方法,可以简洁改善react组件,所以官网文档和几乎所有教程都以...react和ES7装饰修饰符等特性为切入点 MobX传统ES5环境也能良好工作,本文尝试以此为出发点,探讨既有的非react项目中直接引入MobX并用其整理重构老代码方法 没有babel、...常用API 3.1 computed computed values指的是从状态或其他派生中派生出来 当依赖改变时,派生也自动更新 产生派生函数应该是无副作用纯函数 除了上面提过类实例里使用..., fn) 被用来对那些没有单独设置观察状态创建reaction函数 当初始化和依赖改变时,相关函数就会执行 autorun返回是一个解除观察函数 var str = mobx.observable...'10' disposer(); numbers.push(5); // 无输出 autorun错误处理: const age = mobx.observable(10); const dispose

41740

仅用18行JavaScript构建一个倒数计时器

将时钟数据输出为重复使用对象 准备好几天,几小时,几分钟和几秒钟之后,我们现在可以将数据作为重用对象返回: return { total, days, hours, minutes..., seconds }; 该对象允许我们调用函数并获取任何计算。...消除初始延迟,使您时钟立即显示。 提高时钟脚本效率,以免持续重建整个时钟。 根据需要添加前导零。 1.消除初始延迟,使您时钟立即显示 时钟,我们习惯于setInterval每秒更新一次显示。...多数情况下,这很好,除非在开始时会有一秒钟延迟。要消除此延迟,我们必须在间隔开始之前更新一次时钟。 让我们将要传递给setInterval匿名函数移到其自己独立函数。...我们只想更新时钟数字,而不是每秒重新构建整个时钟。实现此目的一种方法是将每个数字放在span标签,然后仅更新这些跨度内容。

2.9K10

用故事解读 MobX 源码(一)autorun

R1 和观察员 O1 建立关系并非一步到位,是 分两个阶段 : 第一阶段(对应上述步骤 3.6.2)是执行任务期间,仅仅是建立短暂 单向关系;即,此时探长 R1 知晓观察员 O1 情况,反过来...所以 MobX 就将任务执行笼罩在自己所营造氛围,改变不了任务实体,改变环境总行了吧?!!...探长 R1 整理和观察关系 两者依赖更新算法参考文章Mobx 源码解读(四) Reaction 中有详细注解,推荐阅读。这里也做一下简单介绍。...数组,是陈旧关联),则调用 removeObserver 去除该关联;因此这次遍历之后会删除 observing 数组 D 对象 让 observing 数组剩余对象 diffValue 变成...,以上陈述是 错误!?

44320

用故事解读 MobX 源码(一)autorun

R1 和观察员 O1 建立关系并非一步到位,是 分两个阶段 : 第一阶段(对应上述步骤 3.6.2)是执行任务期间,仅仅是建立短暂 单向关系;即,此时探长 R1 知晓观察员 O1 情况,反过来...所以 MobX 就将任务执行笼罩在自己所营造氛围,改变不了任务实体,改变环境总行了吧?!!...探长 R1 整理和观察关系 两者依赖更新算法参考文章Mobx 源码解读(四) Reaction 中有详细注解,推荐阅读。这里也做一下简单介绍。...数组,是陈旧关联),则调用 removeObserver 去除该关联;因此这次遍历之后会删除 observing 数组 D 对象 让 observing 数组剩余对象 diffValue 变成...,以上陈述是 错误

97210

实战|仅用18行JavaScript构建一个倒数计时器

将时钟数据输出为重复使用对象页面上显示时钟,并在时钟为零时停止时钟。 2.设置有效结束日期 首先,你需要设置一个有效结束日期。...5.将时钟数据输出为重复使用对象 准备好几天,几小时,几分钟和几秒钟之后,我们现在可以将数据作为重复使用对象返回: return { total, days, hours, minutes..., seconds, }; 这个对象允许你调用你函数,并获得任何计算。...7.1 消除初始延迟 时钟,我们使用 setInterval 每秒更新一次显示。多数情况下,这很好,除非在开始时会有一秒钟延迟。要消除此延迟,我们必须在间隔开始之前更新一次时钟。...(updateClock, 1000); 7.2 避免不断重建时钟 我们需要使时钟脚本更高效,我们只想更新时钟数字,而不是每秒重建整个时钟。

4.1K41

详解 JS 事件循环、宏微任务、Primise对象、定时器函数,以及其在工作应用和注意事项

对象是异步编程一种重要机制,它代表了一个尚未完成预期将来会完成操作最终结果。...setInterval() setInterval() 函数用于重复调用一个函数或执行代码片段,每隔指定周期时间(以毫秒为单位)。 它也是非阻塞,每次间隔时间到达后,就会尝试执行指定代码。...由于 requestAnimationFrame 调用时间是由浏览器决定,通常它频率会与浏览器刷新率相匹配,例如大多数设备上是每秒60次(即60Hz),这可能会因设备而异。...// 之后,你可以停止观察 // observer.disconnect(); MutationObserver 在工作应用注意事项 性能考虑:虽然 MutationObserver 是异步过度使用或监视大量...Vue如何销毁定时器?React如何销毁定时器?为什么要销毁定时器? 是 fx67ll.com,如果您发现本文有什么错误,欢迎评论区讨论指正,感谢您阅读!

7610

干货 | 浅谈React数据流管理

本文正式开始之前,先试图讲清楚两个概念,状态和数据: 我们都知道,react是利用复用组件来构建界面的,组件本质上是一个有限状态机,它能够记住当前所处状态,并且能够根据不同状态变化做出相应操作...这里以mobx 5版本为例,实际上它是利用了ES6proxy来追踪属性(旧版本是用Object.defineProperty来实现)通过隐式订阅,自动追踪被监听对象变化,然后触发组件UI更新。...观察者模式,有两个重要角色:Observable和Observer,熟悉mobx同学对这个一定不陌生(所以我建议想要学习rxjs同学,如果对mobx不熟悉,可以先学习一下mobx,然后再学习rxjs...就是可观察对象观察者,可观察对象(Observable)也就是事件发布者,负责产生事件,而观察者(Observer)也就是事件响应者,负责对发布事件作出响应,但是如何连接一个发布者和响应者呢?...rxjs,作为事件响应者(消费者)Observer对象也有一个next属性(回调函数),用来接收从发布者那里“推”过来数据。

1.8K20

Mobx 核心概念简单入门:以股票为例

概述 MobX 是一个简单、扩展状态管理工具。相比 redux,mobx可以使用更自由,更少代码来管理状态。...核心概念 MobX 主要包括了四个核心概念:可观察状态、根据状态得到计算、基于状态变化发生反应,触发状态变化动作。 下面我们以股票为例,简单说明下这四个核心概念。...那么即是根据状态得到计算; 每次股价变动,会导致页面上股价曲线图发生改变,也会导致页面上显示总价值发生改变。...可观察状态(Observable state) MobX 通过使用 @observable 为现有的数据结构(如对象,数组和类实例)添加了可观察功能,这样当数据发生变化时候就可以继续进行下一步发应...(Computed values) Mobx 可通过 @computed 装饰器来定义某些状态发生变化时自动更新

85950

MobX】390- MobX 入门教程(上)

:应该避免下标越界去方法数组,这样数据将不会被 MobX 所监视: const list = observable([1, 2, 4]); // 错误 console.log(list[9])...此外计算还是高度优化过,所以尽可能多使用它们。 可以简单理解为:它是相关状态变化时自动更新,可以将多个可观察数据合并成一个可观察数据,并且只有在被使用时才会自动更新。...知识点:computed(expression) 函数 一般可以通过下面两种方法观察变化,并获取计算: 方法1: 将 computed 作为函数调用,返回对象使用 .get() 来获取计算的当前...知识点:错误处理 计算计算期间抛出异常,则此异常会被捕获,并在读取其时候抛出异常。 抛出异常不会中断跟踪,所有计算可以从异常恢复。...,而是达到一个效果(如:打印日志,发起网络请求等命令式副作用); @computed,如果一个计算不再被观察了,MobX 可以自动地将其垃圾回收,而 autorun 必须要手动清理才行。

80320

React 进阶 - React Mobx

makeObservable 新版本 mobx ,想要让整个模块变成响应式,那么需要在 constructor 调用 makeObservable constructor() { makeObservable...(this) } observable 会给属性加一个观察对象,使其能变成可观察,当属性改变时候,观察者会通知每一个依赖项 @observable name = "Cell" action...常用 API mobx-react api ,用于把 mobx 状态,提供给组件,并把组件也变成可观察 —— mobx 状态改变,组件触发更新。... observer ,如何收集依赖项,与 observable 建立起关系 派发更新:当改变可观察属性时候,如何更新对应组件 # 模块初始化 绑定状态-observable 激活状态-makeObservable...拓展性比较强,可以通过中间件自定义增强 dispatch Redux ,基本有一个 store ,统一管理 store 下状态, mobx 可以有多个模块,可以理解每一个模块都是一个 store

82111

MobX 和 React 十分钟快速入门

主要区别是这些函数不产生,而是自动地执行一些任务,这些任务通常与 I/O 相关。他们保证了正确时间自动地更新 DOM 或者发起网络请求。 最后我们看看 行动(actions)。... MobX 帮助下,我们不需要先格式化数据并写相应选择器以保证我们组件可以被更新。实际上,甚至是数据存储位置也并不重要。只要对象被设置为 obervable,MobX 将可以追踪他们。...包提供了一个被用于 MobX + ReactJS 应用显示屏幕右上角开发工具。...点击第一个按钮将会高亮每一个被重新渲染 @observer 组件。如果你点击第二个按钮,预览组件依赖树将会显示出来,你可以在任何时候准确地检测出它正在观察是哪一段数据。 结论 就这么多!...使用 mobx-react 包 @observer 装饰器将你 React 组件变得真正响应。他们将会自动并有效地更新。即使是在用够大量数据大型复杂项目中。

1.1K30

Mobx 核心概念简单入门:以股票为例

核心概念 MobX 主要包括了四个核心概念:可观察状态、根据状态得到计算、基于状态变化发生反应,触发状态变化动作。 下面我们以股票为例,简单说明下这四个核心概念。...那么即是根据状态得到计算; 每次股价变动,会导致页面上股价曲线图发生改变,也会导致页面上显示总价值发生改变。...可观察状态(Observable state) MobX 通过使用 @observable 为现有的数据结构(如对象,数组和类实例)添加了可观察功能,这样当数据发生变化时候就可以继续进行下一步发应...(Computed values) Mobx 可通过 @computed 装饰器来定义某些状态发生变化时自动更新。...UI 什么 } 触发状态变化动作(Action) 非严格模式下,mobx状态可以在任何地方进行修改,如上面我们改变股价就是直接修改。

79420

2023再谈前端状态管理

Class 时代 Redux Redux 灵感来源于 Flux 架构和函数式编程原理,状态更新预测、跟踪,提倡使用「单一存储」。这通常会「导致将所有的东西存储一个大单体存储」。...每个 action 都会调用所有 reducer; reducer 要返回新对象,如果更新层级较深,更新成本也很高; 更多内存占用,由于采用单一数据源,所有状态存储一个 state ,当某些状态不再需要使用时...Mobx学习成本更低,没有全家桶。 Mobx更新state深层嵌套属性时更方便,直接赋值就好了,redux则需要更新所有途经层级引用(当然搭配immer也不麻烦)。...Mobx优势是写法简单和高性能,状态可维护性不如redux,并发模式兼容性也有待观察。...基于ES6 proxy ,使用观察者/可观察模式,当你修改一个时,任何使用该组件都会自动重新渲染。 原子化管理状态,进行精确渲染。

73310

MobX管理状态(ES5实例描述)-2.可观察类型

MobX是一个简单有效状态管理库,以派生(derive)概念为核心,以观察者模式为手段,达到了修改数据自动更新界面等目的 正因为其本身提供了包装react方法,可以简洁改善react组件,所以官网文档和几乎所有教程都以...react和ES7装饰修饰符等特性为切入点 MobX传统ES5环境也能良好工作,本文尝试以此为出发点,探讨既有的非react项目中直接引入MobX并用其整理重构老代码方法 没有babel、...() ,其所有属性都会成为可观察,并被拷贝到一个副本(对副本更改也同时影响原始对象) 默认是递归处理,如果一个属性是对象或数组,其元素也会被观察 var $ctn = document.querySelector...,向observable()传递一个数组参数,数组每一项也会变为可观察,且默认为递归处理深度观察对象类似,数组也有一个浅观察方法 observable.shallowArray(value...2.4 基本类型和引用 所有JS基本都是不可变,因此单个变量无法被观察 MobX将这些类型转换成可观察“boxed value” 转换后对象可调用如下方法: get() - 取得当前 set

64430

Solid.js 就是理想 React

当时项目代码库有很多类组件,总让觉得很笨重。 我们来看看下面的例子:一个每秒递增一次计数器。...于是 Solid 解决了 React useEffect hook 问题,而无需编写看起来像 hooks 东西。我们可以扩展我们计数器例子来探索 Solid 效果。...细粒度 DOM 更新 前面主要关注是 Solid 开发体验(例如更容易编写没有错误代码), Solid 性能表现也得到了很多赞誉。...Solid 甚至没有重新运行同一 div 较早 console.log。 小 结 在过去几年里很喜欢使用 React;处理实际 DOM 时,总感觉它有着正确抽象级别。...话虽如此,也开始注意到 React hooks 代码经常变得容易出错。感觉 Solid.js 使用了 React 许多符合人体工程学部分,同时最大程度减少了混乱和错误

1.8K50
领券