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

使用JSON-Object填充时,Mobx无法设置未定义的属性'@observable‘

在使用JSON-Object填充时,Mobx无法设置未定义的属性'@observable'的问题是因为Mobx需要在被观察的属性上添加@observable装饰器来定义可观察的属性。如果尝试给一个未定义的属性添加@observable装饰器,Mobx会报错。

解决这个问题的方法是在使用JSON对象填充时,确保为需要被观察的属性添加@observable装饰器。这样Mobx就可以正确地追踪这些属性的变化。

如果你使用的是Mobx的最新版本(6.x),则可以使用makeObservable函数来动态地为对象添加可观察的属性。例如,在类中可以这样使用:

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

class MyObject {
  // 使用makeObservable动态添加可观察属性
  constructor() {
    makeObservable(this, {
      myProperty: observable,
    });
  }
}

const myObj = new MyObject();

在上述示例中,myProperty是需要被观察的属性,通过使用makeObservable函数将其添加到可观察的属性列表中,Mobx就能够正确地追踪该属性的变化。

关于Mobx的更多信息,你可以访问腾讯云的Mobx产品介绍页面:Mobx产品介绍。Mobx是一种用于状态管理的JavaScript库,适用于构建响应式的前端应用程序。它提供了简单而强大的方式来管理应用程序的状态,并自动追踪和更新状态的变化。

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

相关·内容

MobX 和 React 十分钟快速入门

但这带来了新问题:数据需要规范化,无法保证引用完整性,使用原型之类强大概念几乎是不可能MobX 通过解决根本问题重新简化了 State 管理工作:我们根本无法创建不稳定 State。...我们可以使用 @observable 和 @computed 装饰器为一个对象增加 observable 属性: class ObservableTodoStore { @observable...我们为 MobX 标记了一些 @observable 属性,这些属性值可以随时改变。计算值是用 @computed 标记以表示他们可以由 state 推导出来。...由于 report 使用observable todos 属性,所以它将会在所有合适时刻打印 report。...下面对你目前学到东西做一个简要总结: 使用 @observable 装饰器或 observable(objectorarray) 函数使 MobX 可以追踪对象。

1.2K30

全新 Javascript 装饰器实战上篇:用 MobX 方式打开 Vue

然而旧版装饰器已经被广泛使用,比如 MobX、Angular、NestJS… 未来较长一段时间内,都会是新旧并存局面。...本文将把装饰器语法带到 Vue Reactivity API 中,让我们可以像 MobX 一样,使用类来定义数据模型, 例如: class Counter { @observable count...MobX computed 并没有该问题,MobX computed 在订阅者清空,会「挂起(suspend)」,清空自己订阅(除非显式设置了 keepAlive),从而可以规避这种内存泄露。...,笔者认为主要有以下几点: 性能优化:旧版装饰器可以对 class 进行魔改,这就导致了引擎在解析完 Class 体后再去执行装饰器,最终 Class 结构可能发生较大改变,导致引擎优化无法生效...只不过,这个对已有的代码倾入性太大了,所有相关属性都需要修改为 accessor, 但对于 API 使用者来说没什么区别: class A { @observable accessor obj

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

    设置可观察数据(observable) 1.1 (@)observable observable 是一种让数据变化可以被观察方法,底层是通过把该属性转化成 getter / setter 来实现。...observable 使用 对于JS原始类型(Number/String/Boolean), 使用observable.box()方法设置: const num = observable.box(99)...使用 MobX 也提供使用装饰器 @observable 来将其转换成可观察,可以使用在实例字段和属性上。...如果前一个计算中使用数据没有更改,计算属性将不会重新运行。 如果某个其它计算属性或 reaction 未使用该计算属性,也不会重新运行。 在这种情况下,它将被暂停。...: boolean 设置为 true 以自动保持计算值活动,而不是在没有观察者暂停; 2.2 autorun 概念 autorun 直译就是自动运行意思,那么我们要知道这两个问题: 自动运行什么?

    82620

    用故事解读 MobX源码(四) 装饰器 和 Enhancer

    :在这里是 [_mobx.observable](不同修饰符装饰器是不一样,比如使用 @computed 修饰 total 方法,就是 [_mobx.computed]),是长度为 1 数组,具体...如果是属性成员,则调用 _initDefineProp 方法 图中标注 ② ,表示对于方法成员(比如 total)则直接应用 Object.defineProperty 方法(当是方法成员,desc...以 price 属性为例,由于只有一个装饰器(@observable),所以只应用了 [_mobx.observable] 这一个装饰器。...通过图中标注 ③ 我们可以理解,当我们写装饰器函数函数,函数定义入参必须是 (target, name, descriptor) 这样,同时该函数必须要返回属性描述符。...在创建 observable 发挥作用 再结合 types/modifier.ts 中有各种 Enhancer 具体内容,就能大致了解 enhancer 是如何起到 转换数值 作用,再分析下去就是观察值

    90920

    MobXMobX 简单入门教程

    设置可观察数据(observable) 1.1 (@)observable observable 是一种让数据变化可以被观察方法,底层是通过把该属性转化成 getter / setter 来实现。...observable 使用 对于JS原始类型(Number/String/Boolean), 使用observable.box()方法设置: const num = observable.box(99)...使用 MobX 也提供使用装饰器 @observable 来将其转换成可观察,可以使用在实例字段和属性上。...如果前一个计算中使用数据没有更改,计算属性将不会重新运行。 如果某个其它计算属性或 reaction 未使用该计算属性,也不会重新运行。 在这种情况下,它将被暂停。...: boolean 设置为 true 以自动保持计算值活动,而不是在没有观察者暂停; 2.2 autorun 概念 autorun 直译就是自动运行意思,那么我们要知道这两个问题: 自动运行什么?

    1.5K00

    mobx 入门

    , 通过对可观察对象监控,当数据变化做出对应动作,所以可以大概归纳为: 构建观察对象 设置响应动作 在mobx中构建观察对象存在两种模式 函数模式 装饰器模式(针对类定义) 函数模式 创建观察对象...([ ["name", "Rogan"] ])) /* 注意: 我们实际操作是观察对象,而非我们创建传入值, 我们可能修改保存观察对象变量,这是将丢失观察对象...例如: let arr = observable([1) arr = [2] */ 响应变化 autorun 当函数内观察对象属性值变化时,将触发该函数...(get, set) // get: 获取值函数 // set: 设置值函数 import { observable, computed } from 'mobx' const obj = observable...配置和 react 使用在类中 类中使用 observable class Man { // 使用装饰器 构建装饰器值 @observable name = '' @observable

    1K20

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

    可观察类型 语法 mobx.observable(value) 2.1 普通对象 普通对象指不是通过构造函数创建,没有特定原型对象 plain object 如果一个普通对象被传递到 observable...remove(value) peek(): 和slice()类似,返回一个安全原生数组 intercept(change=> change|null ): 拦截更改,并可指定使用自定义后更改 observe...2.4 基本类型值和引用 所有JS基本值都是不可变,因此单个变量无法被观察 MobX将这些类型转换成可观察“boxed value” 转换后对象可调用如下方法: get() - 取得当前值 set...= new Person("Matthew", "Henry");//对已初始化实例增添新可观察属性 mobx.extendObservable(matthew, { age: 25 });...类实例中描述符 描述符被用来对指定属性定义特殊行为 比如用observable.ref()来浅观察引用、用computed()来声明一个派生属性,或用action()定义一个改变状态动作 var

    70130

    实现简版 react 状态管理器 mobx

    mobx 是一个简单可扩展状态管理库,中文官网链接。小编在接触 react 就一直使用 mobx 库,上手简单不复杂。...mobx vs reduxmobx 学习成本更低,性能更好状态解决方案(小编这里没有使用过 redux,但是看过使用 redux 状态管理代码,确实使用起来比较复杂)开发难度低,书写简单开发代码量少...,而是如果值为对象接着递归遍历,这是因为我们如果对根结点进行代理了,当他属性值为对象,我们在进行重新赋值回触发 set 方法,但这里触发是没有必要影响性能。...用过 vue3 朋友应该了解,effect 函数也是和内部属性进行关联,我们可以定义一个全局变量存储,当执行 autorun 函数,对该变量进行赋值,同时我们可以通过拦截 get 方法对属性和全局值进行关联...我们知道 autorun 会自动收集内部函数中使用属性进而绑定关联,那我们在函数 render 方法中使用了 store 数据,当属性改变,就会触发 autorun,我们在 autorun 中重新渲染

    1.4K30

    MobX 实现原理揭秘

    mobx 每次都是修改同一个状态对象,基于响应式代理,也就是 Object.defineProperty 代理 get、set 处理,get 把依赖收集起来,set 修改时通知所有的依赖做更新。...则是在 class 里组织状态(面向对象特点): import {observable, action} from 'mobx'; class Store { @observable number...这样就完成了 mobx 和 react 结合使用,看下效果: 我们是把时间(secondsPassed)放在 mobx 全局 state 中管理,在组件里使用,然后定时更新它。...看下它定义: 可以看到它有 values 属性记录每个 key 依赖。 还有 getObservableValue 和 setObservableValue 来获取和设置某个 key 值。...并且,这层高阶组件代理里会把当前组件设置到全局,这样后面做 get 依赖收集时候就能拿到对应组件了。

    2.1K11

    用故事解读 MobX源码(五) Observable

    比如当我们读写 bankUser.child 对象 name 属性(比如执行语句 bankUser.child.name = 'Jack'),首先感知到读写操作并非是 观察员 O2 而是bankUser...这其实是 MobX 构建起一套 ”镜像“ 系统,使用者仍旧按平时方式读写对象,然而每个属性读写操作实则都镜像到观察局 某个小组具体操作;非常类似于古代 ”垂帘听政“ ,看似皇帝坐在文武百官前面...当我第一次阅读 官网文档 中针对有关 observable.box 描述: ? 官网对 box 方法说明 来回读了几次,“盒子”是个啥?它干嘛用?...使用 deepDecorator 进行装饰 你会发现应用装饰器最后一步是在调用 defineObservableProperty 方法创建 ObservableValue 属性,对应在 defineObservableProperty...在这里,我们就能知道挂载 $mobx 属性意图:MobX 为我们创建了原对象属性 镜像 操作,所有针对原有属性读写操作都将镜像复刻到 $mobx.values 对应 Observable 实例对象上

    83320

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

    常用API 3.1 computed computed values指的是从状态或其他派生值中派生出来值 当依赖值改变,派生值也自动更新 产生派生值函数应该是无副作用纯函数 除了上面提过在类实例里使用..., fn) 被用来对那些没有单独设置观察者状态创建reaction函数 当初始化和依赖值改变,相关函数就会执行 autorun返回值是一个解除观察函数 var str = mobx.observable..., fn)语法,创建一个action,用来改变状态 action可以用于任何改变可观察状态方法,或有副作用方法 对于派生属性对应setter方法,将自动被视为一个action 设置mobx.useStrict...()几个方法,从而使该action达到不被追踪、允许并集中修改状态目的 如果使用action.bound(fn)替换action(fn),则fn和目标对象绑定,this指向一直都不会变 action中异步动作...runInAction也被用来替换过时transaction,批量执行多个状态变更,以免触发多次事件 var obj = mobx.observable({a:1, b:2});var act = mobx.action

    43240

    🚀🚀🚀初识mobx,以及mobx-react使用

    具体使用如下:autorun:当依赖属性变化执行一个指定方法,自动收集依赖reaction:将第一个方法返回值作为第二个方法参数,然后执行第二个方法when:当第一个方法返回值为true...this.condition, () => console.log("数据为空"))// 当when方法没有设置第二个参数,会返回Promise对象when(() => !...,例如,在React使用Mobx,通常我们会在组件销毁清除他们useEffect(() => { const dispose = reaction( () => this.condition...mobx6开始已经不建议使用注解写法了,但是你仍然可以使用这个功能。...使用时,需要先给idea设置注解识别功能,然后配置相关babel插件,这里不展开了,详细内容可以看看这里今天学习内容就这些了,下篇文章会先将整理好面经发布出来,然后继续分享在新公司一些学习笔记

    9710

    MobX学习之旅

    MobX官方推荐与React搭配使用,来存储和更新应用状态,所以最好搭配mobx-react中间件使用: 原理: 1、Reactrender是将存储状态转化为树状结构来渲染组件方法; Mobx...Observable 是被观察着和观察者概念,你也可以理解为生产者和消费者概念 @observable/Observable 方法将对象所有属性重新克隆成新对象,并将克隆对象转变成可观察。...@observer就是在你订阅观察对象地方添加注释来监听对象更新 Observable 方法值可以是如下类型: 1、object(原型是Object): Observable方法将该对象克隆成新对象并将属性转变成可观察...Map 4、object(有自身原型对象):这种情况需要使用observable.box(value)来管理这样值 通过box这个箱子来存这些值,并使用.get()用来获取当前值,采用.set(...包单独提供 Observer是用来将React组建转变成响应式组件,内部通过mobx.autorun包装了组件 render函数,来确保store数据更新来刷新组件 @observer 是

    1.4K20

    React 进阶 - React Mobx

    ,颗粒化: class Root { // C 组件使用 @observable object = { name: "Cell", // A 组件使用 msg: "Hello...,用于管理子代属性 ObserverValue 对于外层 Root ,在 constructor 使用 makeObservable ,mobx 会默认给最外层 Root 添加 ObservableAdministration...(this) } observable 会给属性值加一个观察者对象,使其能变成可观察,当属性值改变时候,观察者会通知每一个依赖项 @observable name = "Cell" action...流程分析和原理揭秘 可以从三个角度分析 mobxmobx-react 整个流程: 初始化: mobx 在初始化时候,是如何处理 observable 可观察属性 依赖收集:通过 mobx-react...中 observer ,如何收集依赖项,与 observable 建立起关系 派发更新:当改变可观察属性时候,如何更新对应组件 # 模块初始化 绑定状态-observable 激活状态-makeObservable

    86111

    状态管理库 MobX 和 react

    MobX MobX 是一个简单、方便扩展、久经考验状态管理解决方案 基本概念 MobX 是一个独立组件,可以配合各种框架使用,由于项目中需要使用 react & MobX。...自动执行只在 state 改变时候触发,就好像 Excel 中图表只在单元格数据改变更新一样。...observable & computed 同时,completedTodosCount 属性应该被自动派生,使用 @observable 和 @computed 装饰器来做这些事情: class...Autorun 里东西首先会运行一次,然后当其中函数有 observable 数据发生变化时,会再次运行。 这里我们使用了 todos 属性,每次 todos 变化了我们就打印出新东西。...[0].task = "grok MobX tutorial"; 举个栗子(sf 一个问题有感) 对于单个对象,我可以使用computed通过计算获得一些属性,比如 @observable good

    51420
    领券