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

在我的React应用程序中,mobx @action没有触发- mobx,mobx-react-lite

在你的React应用程序中,当mobx @action没有触发时,可能有以下几个原因:

  1. mobx-react-lite版本不兼容:确保你使用的mobx-react-lite版本与mobx版本兼容。你可以查看官方文档或者GitHub仓库来获取兼容的版本信息。
  2. mobx @observable未正确使用:确保你正确地使用了mobx的@observable装饰器来标记需要观察的状态。@observable装饰器用于将普通的JavaScript属性转换为可观察的属性。
  3. mobx @action未正确使用:确保你正确地使用了mobx的@action装饰器来标记需要触发的动作。@action装饰器用于标记一个函数,当函数被调用时,mobx将自动跟踪其对可观察状态的更改。
  4. mobx观察者未正确注册:确保你正确地将mobx观察者与React组件连接起来。你可以使用mobx-react-lite提供的useObserver钩子函数来实现这一点。确保你的组件内部使用了useObserver包裹需要观察的部分。
  5. mobx @action未在正确的上下文中调用:确保你在正确的上下文中调用了mobx的@action。如果你在异步函数中使用@action,你需要使用runInAction函数来确保@action在正确的上下文中执行。

如果你仍然无法解决问题,可以提供更多的代码和错误信息,以便更好地帮助你解决问题。

关于mobx和mobx-react-lite的更多信息,你可以参考腾讯云的云开发文档中关于mobx的介绍和使用指南:mobx介绍和使用指南

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

相关·内容

  • Mobx6 新写法

    目前 MobX 已经更新到 6.X 了,相比于之前有了极大简化,去掉了之前版本装饰器风格写法,主要原因是装饰器现在 ES 规范并不成熟,而且引入装饰器语法也会增加打包后代码体积。...02 runInAction函数 不同于 Vuex,将状态批改划分为 mutation 和 action,同步批改放到 mutation ,异步操作放到 action 。... MobX ,不论是同步还是异步操作,都能够放到 action ,只是异步操作修改属性时,需要将赋值操作放到 runInAction async initCount() { try...中使用 mobx mobx-react mobx-react-lite 是一个轻量级 mobx-react 库,提供了对 react hook 支持,这一点 react 16.8 以后是及其必要...mobx-react@6 直接将 mobx-react-lite 作为它一个依赖。 1.

    74310

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

    欢迎关注公众号:萌萌哒草头将军 Mobx简介Mobx是响应式状态管理库,无关任何前端框架。现在已经发布到Mobx6了。...相较于Redux,Mobx只强调下面三个概念State(状态)Actions(动作)Derivations(派生)一句话概括:在任何事件调用action,修改state,如果这个state是响应式,...WatchEffect方法两种写法通过Mobx定义一个响应式Store有很多种方法,不同方法定义他们也有所不同。...() return dispose}, [])但是实际开发,我们会使用具体和框架相关Mobxmobx-reactmobx-vue。...Mobx-react一些用法React中使用Mobx,通常有两个包:mobx-reactmobx-react-litemobx-react:提供类组件和hook组件一些方法mobx-react-lite

    9710

    谈谈 React 5种最流行状态管理库

    使用 Recoil selectors,你可以根据 state 计算派生属性,例如,可能是已过滤待办事项数组(todo app )或已发货订单数组(电子商务应用程序): import { selector...Mobx MobX React Lite Docs[7] 代码行数: 30 因为使用 Redux 之后使用了MobX React, 所以它一直是最喜欢管理 React 状态库之一。...MobX 实践 开始使用Mobx前,先安装依赖: npm install mobx mobx-react-lite 该应用状态已在 Store 创建和管理。...要使组件是可观察修改,需要将其包装在observer: import { observer } from 'mobx-react-lite' import { notes } from '....Reducers A provider 为了帮助解释所有这些工作原理,实现 Redux Notes app 代码做了注释: import React, { useState } from

    2.7K20

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

    装饰器确保状态改变发生在受控环境,这有助于避免不恰当地方修改状态。...this.todos[index].completed; } }观察者(Observers)React,使用mobx-reactobserver高阶组件或useObserver Hook...; }, );动作(Actions)@action装饰器或action函数用于标记状态更改函数。这确保了状态受控环境改变,防止了意外副作用。...在你应用引入在你应用程序文件(通常是index.js或App.js),导入并插入mobxReactDevTools组件: import { Provider } from 'mobx-react...热重载和开发工具MobXmobx-react-devtools插件配合使用,提供了开发过程查看数据流、跟踪依赖和性能分析能力,支持热重载,方便快速迭代。

    16910

    各流派 React 状态管理对比和原理实现

    前言 React 诞生之初,Facebook 宣传这是一个用于前端开发界面库。大型应用,如何处理好 React 组件通信和状态管理就显得非常重要。...State 是只读 Redux ,唯一改变 state 方法是通过 dispatch 触发 actionaction 描述了这次修改行为相关信息。...reducer 需要返回一个新对象会造成心智负担。如果不返回新对象或者更新值过于深层,经常会发现 action 发送出去了,但为什么组件没有更新呢?...Mobx MobxReact 另一种经过战火洗礼状态管理方案,和 Redux 不同地方是 Mobx 是一个响应式编程(Reactive Programming)库,在一定程度上可以看做没有模板...import { observer, useLocalObservable } from 'mobx-react-lite'; const Measurement = observer(({ unit

    2.9K61

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

    console.log(obj.a) }) obj.b = 3 // 什么都没有发生 obj.a = 2 // observe 函数回调触发了,控制台输出:2 autoRun 函数对 a 进行了取值...get 操作,obj.a 和所在函数完成了绑定关系; 直接对 obj.a 进行赋值 set 操作,触发了 get 操作所在函数执行; 对 b 操作没有触发——mobx 是精确到字段更新 将 mobx...数据管理能力应用到 react React Component 对数据源字段进行精确响应更新。...@action 修饰函数完成,@action 语义,表示这是一个修改状态操作 redux Provider 传递 store 是强约定,mobx Provider 灵活传递 store actions...结论 为了不加班,mobx 这边。 参考 Mobx 思想实现原理

    2.1K11

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

    console.log(obj.a) }) obj.b = 3 // 什么都没有发生 obj.a = 2 // observe 函数回调触发了,控制台输出:2 autoRun 函数对 a 进行了取值...get 操作,obj.a 和所在函数完成了绑定关系; 直接对 obj.a 进行赋值 set 操作,触发了 get 操作所在函数执行; 对 b 操作没有触发——mobx 是精确到字段更新 将 mobx...数据管理能力应用到 react React Component 对数据源字段进行精确响应更新。...@action 修饰函数完成,@action 语义,表示这是一个修改状态操作 redux Provider 传递 store 是强约定,mobx Provider 灵活传递 store actions...结论 为了不加班,mobx 这边。 参考 Mobx 思想实现原理

    1.9K70

    React+Mobx写法更像Vue了

    本教程旨在介绍其用法及概念,并重点介绍其与React搭配使用。 vue作者尤雨溪说: Mobx React 社区很流行,实际上 Vue 也采用了几乎相同反应系统。...上例autorun函数,只对value值进行了操作,而并没有number值什么事儿,所以number.set(101)这步并不会触发autorun,只有value变化才触发了autorun。...end触发回调函数,被action给包裹了,这就很好验证了上面加粗那句话,action无法影响当前函数调用异步操作,而这个回调毫无疑问是一个异步操作,所以必须再用一个action来包裹住它,这样程序才不会报错...结合React使用 React,我们一般会把和页面相关数据放到state需要改变这些数据时候,我们会去用setState这个方法来进行改变。...之后我们实例化一个对象,叫做newState,之后React组件只需要用@observer修饰一下组件类,便可以愉悦地使用这个newState对象值和函数了。

    1.6K20

    MobX】391- MobX 入门教程(下)

    三、MobX 常用 API 介绍 3. 修改可观察数据 在上一部分内容,我们了解到,对可观察数据做出反应时候,需要我们手动修改可观察数据值。...多数情况下,这种高频触发是完全没有必要。 比如用户对视图一次点击操作需要很多修改 N 个状态变量,但是视图更新只需要一次就够了。 为了优化这个问题, MobX 引入了 action 。...3.1 (@)action action 是修改任何状态行为,使用 action 好处是能将多次修改可观察状态合并成一次,从而减少触发 autorun 或者 reaction 次数。...2019102301.png 在这个案例,我们引用 mobx-react 库来实现,很明显可以看出 mobx-react 是作为 mobxreact 之前桥梁。...首先安装 mobx-react 依赖: cnpm i mobx-react -D 修改webpack.config.js, presets 配置添加 react 进来: // ...

    89620

    为了学好 React Hooks, 抄了 Vue Composition API, 真香

    尽管初期受到不少争议,个人还是比较看好这个 API 提案,因为确实解决了 Vue 以往很多痛点, 这些痛点在它 RFC 文档说得很清楚。...跟踪组件依赖并触发重新渲染 基本接口已经准备就绪了,现在如何和 React 组件建立关联,响应式数据更新后触发组件重新渲染?...Mobx 有一个库可以用来绑定 React 组件, 它就是 mobx-react-lite, 有了它, 我们可以监听响应式变化并触发组件重新渲染。...我们可以参考 mobx-react 或者 mobx-react-lite 实现。...(仅代表作为React爱好者立场) 另外响应式机制也不是完全没有心智负担,最起码你要了解响应式数据原理,知道什么可以被响应,什么不可以: // 比如不能使用解构和展开表达式 function useMyHook

    3.1K20

    Mobx实践

    mobx-react则提供了observer方法,用来收集组件依赖数据,一旦这些数据变化,就会触发组件重新渲染。...mobx,我们可以直接在reactclass里面用observable声明属性来代替state,这样可以立马拿到更新后值,而且observer会做一些优化,避免了频繁render。...action和dataModel一起组合成了页面的总store,dataModel只存放UI数据以及只涉及自身数据变化action操作(mobx严格模式,修改数据一定要用action或flow)。...个人理解,dataModel更像MVCmodel,action store是controller,react components则是view,三者构成了mvc结构。...也许很多人没有注意到,mobx-react还提供了一个Observer组件,这个组件接收一个render方法或者render props。

    87120

    MobX

    Redux) Redux里reducerMobX里都给塞进action了,不用再拿reducer来描述state结构,也不用再关注reducer纯不纯(MobX只要求computed是纯函数) computed...Vuex嫌Fluxaction不够细化,没有考虑异步场景,才提出了mutation之上action,而MobX嫌区分同步异步,纯与不纯太麻烦,才提出了动词action,囊括异步和副作用 computed...这一点与Vue数据绑定优势相同,类库自己能监听到数据变化,不需要用户手动通知变化,业务写起来方便了 更强大DevTools Fluxaction核心作用是让状态变化可追溯,action作为状态变化原因可以被记录下来...限制state不能被随意修改,这样建立在数据模型上一些原有优势就没了,比如原型 而MobX对state结构及类型都没有什么限制,MobX里state定义是: Graphs of objects,...通过setState({})来触发Container更新,而mobx-react通过forceUpdate来触发被劫持View更新: const initialRender = () => {

    1.1K20

    ReduxMobxAkitaVuex对比 - 选择更适合低代码场景状态管理方案

    有两个核心方法: dispatch方法:触发一个 action,一般由 view 层调用; register方法:用于注册 actionType 回调,回调操作 store。...observable 对象变化会“自动触发” observer 对象执行对应响应逻辑,而自动触发实现方式不同工具存在差异,进而造成代码范式、扩展性、性能等方面的差异。...在此背景之下,再去理解Mobx三个核心概念: State - 状态,顾名思义就是应用程序使用状态数据, Mobx ,state 是一种 Observable 对象; Actions -...Mobx action 与 Redux 和 Vuex action 都不同,Redux action 是行为描述对象,并不会改变 state;Vuex action 是可选,一般是用来执行异步操作...这里意思并不是说工具性能不重要,而是还没有成为应用程序性能瓶颈。本文调研几个工具都是很成熟开源产品,已经经受了大量业务验证,虽然性能上存在些许差距,但对应用性能表现影响非常有限。

    1.9K11

    MobX学习之旅

    例如React体系,react + redux + react-redux + redux-saga, view层触发一个action,中间件会将这个动作进行dispatch,然后reducer执行相应更新状态方法...对比React-Redux component-->actionCreator(data)-->reducer-->component 这里reducerMobX里都给了action,直接通过...,那就使用autorun,但是一般这种情况比较少 Action 比起官方说“动作”,更愿意称为是“行为”,mobxaction吸收了redux和vuex数据处理复杂逻辑 用来修改状态,不同于Computed...,而不是立即执行autorun,那么我们可以用到reaction了; Reaction Reaction是初次数据变化后才会触发 四、Mobx-react核心概念 Observer 是mobx-react...,当组件重新render时候会被触发,但在初始渲染前是不会被触发 onError mobx-react提供错误钩子函数来收集错误 用法: import { onError } from 'mobx-react

    1.4K20

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

    还有些朋友想要使用 React Hooks 来重构升级部分业务,或者封装优化一些通用业务组件,来提升项目的可扩展性,但是却困于不知如何 Hooks 中继续使用Mobx 这一状态管理库了,使用过程感觉畏手畏脚奇奇怪怪...其实吧,Mobx 作为当下炙手可热状态管理库,很早就推出了 v6 版本,紧跟技术潮流,极大方便了我们 Hooks 环境下,更好React 进行状态管理。想这也是它炙手可热原因之一吧!...(仅代表个人观点,望各位大佬不想吐槽) 但是呢,实际开发过程,纯粹使用Hooks 的话,还是会遇到一些问题: 依赖传染性 —— 这导致了开发复杂性提高、可维护性降低 缓存雪崩 —— 这导致运行性能降低...其实 Hooks 这些问题都是因为没有一个公共空间来共享数据导致 Class 组件,我们有 this , Vue3 ,我们有 setup作用域 。...关于Observer Component 这种方式最新版本 Mobx ,已经变为基于useObserver 来实现了。

    1.3K10

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

    前言:最近接触到一种新(对个人而言)状态管理方式,它没有采用现有的开源库,如redux、mobx等,也没有使用传统useContext,而是用useState + useEffect写了一个发布订阅者模式进行状态管理...ps:这里谈到状态管理是指全局状态管理,局部使用useState即可 状态管理方式目前比较常用状态管理方式有hooks、redux、mobx三种,下面将详细介绍一下这三类使用方法以及分析各自优缺点...缺点两种hooks管理方式都有一个很明显缺点,会产生大量无效rerender,如上例Count和Name组件,当state.count改变后,Name组件也会rerender,尽管他没有使用到state.count...状态管理常规使用(mobx-react)使用方法1.引入mobxyarn add mobx mobx-react -D2.创建store/src/store目录下创建你要用到store(在这里使用多个...每次都进行依赖收集原因是,每次执行依赖可能会发生变化总结简单总结了一下目前较为常用状态管理方式,个人最喜欢使用方式是Mobx+Hooks,简单轻量易上手。

    3.6K00
    领券