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

当我设置observable时,mobx-react观察器不会触发

当你设置observable时,mobx-react观察器不会触发的可能原因有几种可能性:

  1. 可能是因为你没有在mobx-react组件中正确地使用@observer装饰器。@observer是mobx-react提供的一个装饰器,用于将组件转换为响应式组件。确保你正确地使用了@observer装饰器来修饰你的组件,以确保mobx观察器可以正常工作。
  2. 可能是因为你的observable没有被正确地访问。mobx观察器只会在你对observable进行读取或写入时才会触发更新。如果你没有在组件中正确地访问observable,那么mobx观察器将无法触发更新。确保你在组件中正确地访问和使用了observable。
  3. 可能是因为你的observable没有被正确地定义。确保你在定义observable时使用了mobx提供的相关API(如observable、computed等),以确保mobx观察器可以正确地跟踪和更新observable的变化。
  4. 可能是因为你的observable在设置后立即发生了变化。mobx观察器在设置observable后不会立即触发更新,而是在下一次React渲染周期中进行更新。如果你的observable在设置后立即发生了变化,那么mobx观察器不会立即触发更新。确保你的observable的变化发生在React渲染周期之外,或者考虑使用mobx的autorun来处理即时更新的需求。

以上是一些可能导致mobx-react观察器不触发的原因,你可以根据具体情况进行排查和调试。如果你需要更详细的帮助和指导,可以参考腾讯云的mobx-react相关产品和文档:

请注意,以上链接仅作为示例,请根据实际情况替换为腾讯云相关产品和文档的真实链接。

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

相关·内容

mobx 入门

, 通过对可观察对象的监控,当数据变化做出对应的动作,所以可以大概归纳为: 构建观察对象 设置响应动作 在mobx中构建观察对象存在两种模式 函数模式 装饰模式(针对类定义) 函数模式 创建观察对象...([ ["name", "Rogan"] ])) /* 注意: 我们实际操作的是观察对象,而非我们创建传入的值, 我们可能修改保存观察对象的变量,这是将丢失观察对象...例如: let arr = observable([1) arr = [2] */ 响应变化 autorun 当函数内的观察对象属性值变化时,将触发该函数...autorun // -> coco obj.age = 24 // 不会触发 autorun obj.name = 'coco' //...赋值相同时,不会触发 autorun computed](https://cn.mobx.js.org/refguide/computed-decorator.html) 有时我们需要观察对象处理后的数据

1K20

【MobX】MobX 简单入门教程

设置观察数据(observable) 1.1 (@)observable observable 是一种让数据的变化可以被观察的方法,底层是通过把该属性转化成 getter / setter 来实现的。...使用 MobX 也提供使用装饰 @observable 来将其转换成可观察的,可以使用在实例的字段和属性上。...怎么触发自动运行? 当修改 autorun 中任意一个可观察数据即可触发自动运行。...2.5 小结 computed 可以将多个可观察数据组合成一个可观察数据; autorun 可以自动追踪所引用的可观察数据,并在数据发生变化时自动触发; when 可以设置自动触发变化的时机,是 autorun...简单实例 这里以简单计数为例,实现点击按钮,数值累加的简单操作,如图: [2019102301.png] 在这个案例中,我们引用 mobx-react 库来实现,很明显可以看出 mobx-react

1.5K00
  • 【MobX】391- MobX 入门教程(下)

    修改可观察数据 在上一部分内容中,我们了解到,对可观察的数据做出反应的时候,需要我们手动修改可观察数据的值。...这种修改是通过直接向变量赋值来实现的,虽然简单易懂,但是这样会带来一个较为严重的副作用,就是每次的修改都会触发 autorun 或者 reaction 运行一次。...3.1 (@)action action 是修改任何状态的行为,使用 action 的好处是能将多次修改可观察状态合并成一次,从而减少触发 autorun 或者 reaction 的次数。...) => [store.string, store.number], arr => { console.log(arr) }) store.bar() // ["pingan", 100] 当我们连续去修改...简单实例 这里以简单计数为例,实现点击按钮,数值累加的简单操作,如图: ?

    89020

    MobX学习之旅

    Observable 是被观察着和观察者的概念,你也可以理解为生产者和消费者的概念 @observable/Observable 方法将对象的所有属性重新克隆成新对象,并将克隆对象转变成可观察的。...; 但是后添加的属性不会变为可观察的,需要用到set或者extendObservable; eg: @observable car = {color: red; name: 'Infinity...computed创建的函数,是有自己的观察者的,而autorun是只有它的依赖关系改变才会重新计算, 否则它的值被认为是不相干的。...,而不是用来产生新的值 接收的参数: 1,对象, 2、delay: 函数延迟执行时间,例如节流去抖 3、name: 4、onError: 用来处理reaction的错误 5、scheduler: 设置自定义调度以决定如何调度...,当组件重新render的时候会被触发,但在初始渲染前是不会触发的 onError mobx-react提供的错误钩子函数来收集错误 用法: import { onError } from 'mobx-react

    1.4K20

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

    核心概念 MobX 主要包括了四个核心概念:可观察的状态、根据状态得到的计算值、基于状态变化发生的反应,触发状态变化的动作。 下面我们以股票为例,简单说明下这四个核心概念。...可观察的状态(Observable state) MobX 通过使用 @observable 为现有的数据结构(如对象,数组和类实例)添加了可观察的功能,这样当数据发生变化的时候就可以继续进行下一步发应...如下设置股票的价格和数量可观察: class Stock { @observable price = 400; @observable num = 1000; } 根据状态得到的计算值...如下设置股票总价值为计算值: class Stock { @observable price = 400; @observable num = 1000; @computed...mobx-react 提供一个 @observer 装饰, 当你的状态发生变化时,会自动(autorun)调用组件的 render 方法,更新 UI,这样就可以把你的(无状态函数)组件变成响应式组件。

    88250

    Quartz定时任务触发启动设置

    需求 为了将触发的Cron表达式放在数据库里,方便维护。所以需要在项目启动去数据库获取Cron表达式,并配置触发,添加到调度里。...实现 在配置定时任务相关的Bean,通过设置init方法,实现配置Bean执行从数据库获取Cron表达式。 因为需要新增ini方法,所以需要新建一个类,继承CronTriggerBean。...在ini方法中从数据库获取Cron表达式,并设置到trigger里。...--触发的Cron表达式是启动从数据库获取的 --> <bean id="TaskTrigger" class="CronTriggerBean" lazy-init="false" init-method...cronExpression=list.get(0).getCCronExpression(); }else{ // 避免没能从数据库取到Cron表达式,导致出现异常,这儿给个永远不会执行的

    72820

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

    核心概念 MobX 主要包括了四个核心概念:可观察的状态、根据状态得到的计算值、基于状态变化发生的反应,触发状态变化的动作。 下面我们以股票为例,简单说明下这四个核心概念。...可观察的状态(Observable state) MobX 通过使用 @observable 为现有的数据结构(如对象,数组和类实例)添加了可观察的功能,这样当数据发生变化的时候就可以继续进行下一步发应...如下设置股票的价格和数量可观察: class Stock { @observable price = 400; @observable num = 1000; } 根据状态得到的计算值...如下设置股票总价值为计算值: class Stock { @observable price = 400; @observable num = 1000; @computed...mobx-react 提供一个 @observer 装饰, 当你的状态发生变化时,会自动(autorun)调用组件的 render 方法,更新 UI,这样就可以把你的(无状态函数)组件变成响应式组件。

    82620

    React 进阶 - React Mobx

    render 函数执行行为,进行的依赖收集 如何监听改变,用自定义存取属性中的 get 和 set ,来进行的依赖收集和更新派发,当状态改变,观察者会直接精确通知每个 listener # 状态提升...# 装饰模式 为了建立观察者模式,便捷地获取状态 / 监听状态,mobx 很多接口都支持装饰模式的写法,所以在 mobx 中,装饰模式是最常用的写法: class Root { @observable...常用 API mobx-react 中的 api ,用于把 mobx 中的状态,提供给组件,并把组件也变成可观察的 —— mobx 状态改变,组件触发更新。...整个流程: 初始化: mobx 在初始化的时候,是如何处理 observable观察属性的 依赖收集:通过 mobx-react 中的 observer ,如何收集依赖项,与 observable...# 依赖收集 观察者-ObservableValue 注入模块-Provider 和 inject 可观察组件-observer 反应-Reaction # 派发更新 # Mobx 与 Redux

    85111

    MobX状态管理:简洁而强大的状态机

    创建可观察状态(Observable State)MobX使用@observable装饰来创建可观察的对象、数组或基本类型,当它们发生变化时,依赖它们的观察者会自动更新。...可观察对象(Observables)MobX使用@observable装饰observable函数来创建可观察的值。当这些值发生变化时,依赖它们的任何计算或视图都会自动更新。...";变化通知(Change Notifications)当可观察状态改变,MobX会通知所有依赖于这个状态的计算值和反应函数。...} from 'mobx';import { Provider, observer } from 'mobx-react';// 创建可观察对象const counterStore = { @observable...性能优化MobX的响应式系统会自动跟踪依赖,仅在必要更新视图,这通常比手动触发更新更高效。

    13910

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

    设置观察数据(observable) 1.1 (@)observable observable 是一种让数据的变化可以被观察的方法,底层是通过把该属性转化成 getter / setter 来实现的。...使用 MobX 也提供使用装饰 @observable 来将其转换成可观察的,可以使用在实例的字段和属性上。...怎么触发自动运行? 当修改 autorun 中任意一个可观察数据即可触发自动运行。...2.3 when 接收两个函数参数,第一个函数必须根据可观察数据来返回一个布尔值,当该布尔值为 true ,才会去执行第二个函数,并且只会执行一次。...2.5 小结 computed 可以将多个可观察数据组合成一个可观察数据; autorun 可以自动追踪所引用的可观察数据,并在数据发生变化时自动触发; when 可以设置自动触发变化的时机,是 autorun

    81720

    问:你是如何进行react状态管理方案选择的?

    【下文会简单介绍下原理】只有当订阅的属性变化时,组件才会rerender,渲染效率较高一个store即写state,也写action,这种方式便于理解,并且代码量也会少一些缺点:当我们选择的技术栈是React...使用方式过于简单Mobx自动订阅实现原理基本概念Observable //被观察者,状态Observer //观察者,组件Reaction //响应,是一类的特殊的 Derivation,...可以注册响应函数,使之在条件满足自动执行。...return result}触发依赖Observable(被观察者,状态)修改后,会调用它的set方法,然后再依次执行该Observable之前收集的依赖函数,触发rerender。...observer这个装饰(也可以是Hoc),对React组件的render方法进行track。将render方法,加入到各个observable的依赖中。

    3.5K00

    问:你是如何进行react状态管理方案选择的?_2023-03-13

    【下文会简单介绍下原理】只有当订阅的属性变化时,组件才会rerender,渲染效率较高一个store即写state,也写action,这种方式便于理解,并且代码量也会少一些缺点:当我们选择的技术栈是React...使用方式过于简单Mobx自动订阅实现原理基本概念Observable //被观察者,状态Observer //观察者,组件Reaction //响应,是一类的特殊的 Derivation,...可以注册响应函数,使之在条件满足自动执行。...return result}触发依赖Observable(被观察者,状态)修改后,会调用它的set方法,然后再依次执行该Observable之前收集的依赖函数,触发rerender。...observer这个装饰(也可以是Hoc),对React组件的render方法进行track。将render方法,加入到各个observable的依赖中。

    2.3K30

    如何进行react状态管理方案选择

    【下文会简单介绍下原理】只有当订阅的属性变化时,组件才会rerender,渲染效率较高一个store即写state,也写action,这种方式便于理解,并且代码量也会少一些缺点:当我们选择的技术栈是React...使用方式过于简单Mobx自动订阅实现原理基本概念Observable //被观察者,状态Observer //观察者,组件Reaction //响应,是一类的特殊的 Derivation,...可以注册响应函数,使之在条件满足自动执行。...return result}触发依赖Observable(被观察者,状态)修改后,会调用它的set方法,然后再依次执行该Observable之前收集的依赖函数,触发rerender。...observer这个装饰(也可以是Hoc),对React组件的render方法进行track。将render方法,加入到各个observable的依赖中。

    3.4K30

    前端一面必会react面试题(附答案)

    【下文会简单介绍下原理】只有当订阅的属性变化时,组件才会rerender,渲染效率较高一个store即写state,也写action,这种方式便于理解,并且代码量也会少一些缺点:当我们选择的技术栈是React...使用方式过于简单Mobx自动订阅实现原理基本概念Observable //被观察者,状态Observer //观察者,组件Reaction //响应,是一类的特殊的 Derivation,...可以注册响应函数,使之在条件满足自动执行。...return result}触发依赖Observable(被观察者,状态)修改后,会调用它的set方法,然后再依次执行该Observable之前收集的依赖函数,触发rerender。...observer这个装饰(也可以是Hoc),对React组件的render方法进行track。将render方法,加入到各个observable的依赖中。

    2.6K20

    实现简版 react 状态管理 mobx

    })o.name = 'hello' // 对应一个 autorun图片由上图可知,autorun 默认会执行一次,当监听的对象的属性改变,会自动触发 autorun 的执行函数。...这里是函数和函数内部的变量有绑定关系,如果我们在 autorun 外面使用 console.log(o.name) 就不会触发回调执行。.../mobx/observable.jsconst observable = (target) => { // 需要将 target 进行代理,创建可观察对象 return createObservable...o.name)})o.name = 'hello'o.name = 'emily'图片实现 observable 装饰可以分为类装饰,属性装饰,方法装饰,我们这里只简单实现下 observable...我们知道 autorun 会自动收集内部函数中使用的属性进而绑定关联,那我们在函数的 render 方法中使用了 store 的数据,当属性改变,就会触发 autorun,我们在 autorun 中重新渲染

    1.4K30

    Hooks 邂逅 MobX ,代码变得更丝滑了!

    阅读之前请注意: 本文不会介绍太过于基础的内容,你需要对 Mobx 以及 Hooks 有基础的了解; 本文会介绍一些配合应用的最佳实践,方便小伙伴们有一个更加深入的认识。 接下来我们开始学习吧!...另外当我们有异步操作的时候,经常会碰到异步回调的变量引用是之前的,也就是旧的,于是就导致无法批量更新。...其实它就是在 Hooks 的环境下封装的一个更加方便的 observable。作用就是给它一个函数,函数返回一个需要响应式的对象。.../** * 实现一个方法,只有当鼠标移动超过多少像素之后,才会触发组件的更新 */ // props.size 控制移动多少像素才触发回调 function MouseEventListener(props...// 不会有任何 ref,任何 current 的使用,任何依赖的变化 function MouseEventListenerMobx(props) { const state = useLocalStore

    1.3K10

    TS+React+Router+Mobx+Koa打造全栈应用

    ", // 设置相对路径的基础路径 "paths": { // 设着alias别名,类似webpack,相对上面设置的基础路径 "@/*":["....@observable obj 就相当于 vuex 中 state,需要注意的是@observable不能修饰 primitive value,只能修饰引用类型。...区别在于mobx更加强大,可以更加灵活的定义需要观察的对象。这个不仅仅在react中,在任何一段JS代码里都可以观察进行观察。...并且执行的业务逻辑这块是保存在mobx里的,@observer只是一个'mobx-react'下的用于帮助渲染的装饰。这个装饰会根据state的改变触发react的diff进行渲染。...我们知道使用事件委托要比在每一个元素上都绑定了事件监听要好很多,在vue中,我们给v-for渲染出来的组件绑定事件监听,文档已经指出帮我们做了关于委托的优化。

    1.8K70
    领券