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

错误:[MobX]无法将'observable‘应用于'Store@user':找不到字段

错误:[MobX]无法将'observable'应用于'Store@user':找不到字段

这个错误是由于在使用MobX进行状态管理时,尝试将'observable'应用于'Store@user',但找不到相应的字段引起的。

解决此错误的方法是确保在定义Store类时正确声明并初始化相应的observable字段。在这种情况下,可以检查'Store@user'的定义,并确保它被正确声明和初始化。

以下是一个示例,展示了如何在MobX中使用observable字段:

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

class UserStore {
  @observable userInfo = {}; // observable字段

  @action setUserInfo = (userInfo) => {
    this.userInfo = userInfo;
  }
}

const userStore = new UserStore();
export default userStore;

在上述示例中,userInfo字段被声明为observable,并且可以在Store中使用。如果在其他地方尝试将observable应用于Store@user时仍出现错误,可能需要检查相关代码以确保正确引用和使用observable字段。

另外,关于MobX的更多信息和用法,可以参考腾讯云的云计算文档中关于MobX的介绍:MobX文档链接。这个文档提供了关于MobX的详细说明、示例和使用场景等信息,可以帮助你更好地理解和使用MobX进行状态管理。

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

相关·内容

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

代码转换后的效果 底下会提示 require is not defined 错误,这个错误并不影响你分析装饰器的语法,因为有 @ 符号部分都已经转换成 ES5 语法了,只是这个报错无法让这段示例代码运行起来...因此 Babel 转码模块化写法后在浏览器中还是无法运行,此时可以考虑放到 Webpack 这种自动化构建工具环境中,此时 Webpack 是支持模块化写法的 如果有强迫症的同学,非得想要这段代码运行起来...中的 dependencies 字段比较陈旧了,可以自己手动更新到最新版本 打开控制台就可以看到 bundle.js 文件了: ?...7、不用装饰器语法,mobx 提供了等价写法 很显然,MobX 不能实现(也没有必要)ast 分析 @ 语法转换掉的功能,所以只能提供 循环应用装饰器 的这方面的功能。...@observable 装饰器中真正起作用的函数就是 Enhancer ,你可以 Enhancer 理解成 @observable 装饰器有效的那部分。可以用 "药物胶囊?"

89520

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

本文考虑到篇幅问题,MobX 入门教程》分成上、下两篇文章,方便阅读。分配安排: ? ?...所监视: const list = observable([1, 2, 4]); // 错误 console.log(list[9]) // undefined 因此在实际开发中,需要注意数组长度的判断...使用 MobX 也提供使用装饰器 @observable 来将其转换成可观察的,可以使用在实例的字段和属性上。...都会自动 getter 属性推导成计算属性,所以下面这样就足够了: import {observable} from "mobx"; const Money = observable.object...知识点:错误处理 计算值在计算期间抛出异常,则此异常会被捕获,并在读取其值的时候抛出异常。 抛出异常不会中断跟踪,所有计算值可以从异常中恢复。

81620
  • react 的数据管理方案:redux 还是 mobx

    import { observable } from 'mobx'; const obj = observable({ a: 1, b: 2 }) autoRun(() => {...是精确到字段更新 mobx 的数据管理能力应用到 react 中: React Component 对数据源字段进行精确响应更新。...但是,这里分别用redux方案 和 mobx方案 实现上面的功能。 为了演示方便,所有的代码都放在一个文件中。查看 mobx 实现的代码前,先了解下装饰器(decorator)是什么。..., observer, inject } from 'mobx-react'; // 定义数据结构 class Store { // ① 使用 observable decorator @observable...会动态精确绑定数据字段和对应 component 关系, redux 使用 connect 参数手动控制传递哪些字段 mobx 直接修改 store 的状态,但是必须在 @action 修饰的函数中完成

    2.1K11

    react 的数据管理方案:redux 还是 mobx

    import { observable } from 'mobx'; const obj = observable({ a: 1, b: 2 }) autoRun(() => {...是精确到字段更新 mobx 的数据管理能力应用到 react 中: React Component 对数据源字段进行精确响应更新。...但是,这里分别用redux方案 和 mobx方案 实现上面的功能。 为了演示方便,所有的代码都放在一个文件中。查看 mobx 实现的代码前,先了解下装饰器(decorator)是什么。..., observer, inject } from 'mobx-react'; // 定义数据结构 class Store { // ① 使用 observable decorator @observable...会动态精确绑定数据字段和对应 component 关系, redux 使用 connect 参数手动控制传递哪些字段 mobx 直接修改 store 的状态,但是必须在 @action 修饰的函数中完成

    1.8K70

    MobXMobX 简单入门教程

    所监视: const list = observable([1, 2, 4]); // 错误 console.log(list[9]) // undefined 因此在实际开发中,需要注意数组长度的判断...使用 MobX 也提供使用装饰器 @observable 来将其转换成可观察的,可以使用在实例的字段和属性上。...都会自动 getter 属性推导成计算属性,所以下面这样就足够了: import {observable} from "mobx"; const Money = observable.object(...知识点:错误处理 计算值在计算期间抛出异常,则此异常会被捕获,并在读取其值的时候抛出异常。 抛出异常不会中断跟踪,所有计算值可以从异常中恢复。...事实上,我们只需要记住 observer 方法,所有 React 组件用 observer 修饰,就是 react-mobx 的用法。 4.

    1.5K00

    这也许也是你成长的模样 -- Mobx

    更多请查阅:官方文档 看到一半,浩某随即抄起键盘就开始码例子以便加深印象(因为装饰器只能应用于类所以用类写法、Mobx 版本 4.x): // goodsStore.js // 定义可观测状态以及改变状态的动作...import { action, computed, observable } from 'mobx' class goodsStore { @observable defaultActiveKey...'mobx' class goodsStore { @observable defaultActiveKey = '1' // 这里 @observable goodsList...这样Array.isArray(observable([]).slice())将为 true,以方便进行其他的数组操作等。 emm......浩某最后停下键盘,梳理好的知识点存入有道云笔记以便随时复盘。 最后 以上故事纯属虚构。都看到这了不点个赞吗? 感谢各位大佬的收看,欢迎在下面吐槽(Q A Q)

    40620

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

    ( change => console.log(change.newValue) );name.set("Dave"); // prints: 'DAVE' 处理派生函数中的错误: 应注意正确的报错方式是...*/ var numbers = mobx.observable([1,2,3]); var sum = mobx.computed(() => numbers.reduce((a, b) => a +...'10' disposer(); numbers.push(5); // 无输出 autorun中的错误处理: const age = mobx.observable(10); const dispose...指向一直都不会变 action中的异步动作: action仅对其包裹的fn生效,而由fn调度的函数则不会有效果 对于一些异步方法,比如setTimeout,promise或async/await,可以需要异步处理的部分写进...runInAction也被用来替换过时的transaction,批量执行多个状态变更,以免触发多次事件 var obj = mobx.observable({a:1, b:2});var act = mobx.action

    42740

    MobX学习之旅

    MobX官方推荐与React搭配使用,来存储和更新应用状态,所以最好搭配mobx-react中间件使用: 原理: 1、React的render是存储的状态转化为树状结构来渲染组件的方法; Mobx...Observable 是被观察着和观察者的概念,你也可以理解为生产者和消费者的概念 @observable/Observable 方法将对象的所有属性重新克隆成新对象,并将克隆对象转变成可观察的。...log打印日志,持久化更新UI的代码,而不是用来产生新的值 接收的参数: 1,对象, 2、delay: 函数延迟执行时间,例如节流去抖 3、name: 4、onError: 用来处理reaction的错误...核心概念 Observer 是mobx-react包单独提供的 Observer是用来React组建转变成响应式的组件,内部通过mobx.autorun包装了组件的 render函数,来确保store...,当组件重新render的时候会被触发,但在初始渲染前是不会被触发的 onError mobx-react提供的错误钩子函数来收集错误 用法: import { onError } from 'mobx-react

    1.4K20

    使用 React&Mobx 的几个最佳实践

    Mobx 是我非常喜欢的 React 状态管理库,它非常灵活,同时它的灵活也会给开发带来非常多的问题,因此我们在开发的时候也要遵循一些写法上的最佳实践,使我们的程序达到最好的效果。...当你把业务逻辑写在组件里面的时候,很难及时定位错误的,因为业务逻辑分散在各种不同的组件里面,让你很难来通过行为来定义到底是哪些代码涉及的这个错误,不同组件复用这些逻辑也很困难。...它用 mobx.autorun 包装了组件的 render 函数以确保任何组件渲染中使用的数据变化时都可以强制刷新组件。...class Home extends React.Component { componentWillMount() { // 错误的,info 的更新不会被追踪 this.info...当需要追踪对象属性时、使用 map MobX 可以做许多事,但是它无法原始类型值转变成 observable (尽管可以用对象来包装它们)。所以说值不是 observable,而对象的属性才是。

    1.4K10

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

    可观察的类型 语法 mobx.observable(value) 2.1 普通对象 普通对象指不是通过构造函数创建的,没有特定原型对象的 plain object 如果一个普通对象被传递到 observable...(obj); var observ2 = mobx.observable.shallowObject(obj);mobx.autorun(function(){ //元素内容变为 [new value...('a', 222); var b = mobx.observable.map(es6Map); console.log('map2', b.get('a')); //222var c = mobx.observable.map...2.4 基本类型值和引用 所有JS的基本值都是不可变的,因此单个变量无法被观察 MobX这些类型转换成可观察的“boxed value” 转换后的对象可调用如下方法: get() - 取得当前值 set...(this, { firstName: mobx.observable.ref(firstName), lastName: mobx.observable.ref(lastName

    69030

    高频React面试题及详解

    Mixin的缺陷: 组件与 Mixin 之间存在隐式依赖(Mixin 经常依赖组件的特定方法,但在定义组件时并不知道这种依赖关系) 多个 Mixin 之间可能产生冲突(比如定义了相同的state字段)...做到更彻底的解耦 组合: Hooks 中可以引用另外的 Hooks形成新的Hooks,组合变化万千 函数友好: React Hooks为函数组件而生,从而解决了类组件的几大问题: this 指向容易错误...两者对比: redux数据保存在单一的store中,mobx数据保存在分散的多个store中 redux使用plain object保存数据,需要手动处理变化后的操作;mobx适用observable...更适合数据不复杂的应用: mobx难以调试,很多状态无法回溯,面对复杂度高的应用时,往往力不从心. redux适合有回溯需求的应用: 比如一个画板应用、一个表格应用,很多时候需要撤销、重做等操作,由于redux...ts支持不友好: yield无法返回TS类型 redux-observable优点: 功能最强: 由于背靠rxjs这个强大的响应式编程的库,借助rxjs的操作符,你可以几乎做任何你能想到的异步处理 背靠

    2.4K40

    浅谈前端响应式设计(一)

    当我们需要响应若干个值然后得到一个新值的话,在 Mobx中我们可以这么做: class Model { @observable hour = '00' @observable minute...但是这里也有一个缺点,基于 getter的 computed属性只能描述 y=f(x)的情形,但是现实中很多情况 f是一个异步函数,那么就会变成 y=awaitf(x),对于这种情形 getter就无法描述了...对于这种情形,我们可以通过 Mobx提供的 autorun来实现: class Model { @observable keyword = '' @observable searchResult...或者,我们也可以手动指定需要的字段,但是这种方式就不得不多出一些额外的操作: class Model { @observable loading = false @observable...在下一篇博客中,介绍 Observable处理异步事件的实践。

    58930
    领券