使用Mobx时，在组件使用时数据类型为Proxy

于 2024-02-05 21:13:05 发布
阅读量331 收藏
点赞数 3
文章标签： reactjs
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_60754128/article/details/136047901
版权
本文讲述了在使用Mobx时，如何处理从仓库获取的Proxy类型数据，通过介绍Proxy的作用以及如何利用toJS函数将其转换为正常可使用的数据类型，以实现组件中的响应式更新。
摘要由CSDN通过智能技术生成

在使用Mobx状态管理库时，在仓库中引用接口然后获取到的数据，打印出来都是正常的，但是在组件中引入仓库实例后，发现数据类型变成了Proxy类型
查阅资料发现原因如下：
MobX 库将被观察的对象进行了代理。
这样做的目的是为了实现观察对象的属性访问和修改的拦截，以便在属性发生变化时能够自动追踪和响应。
MobX 使用 Proxy 对象来拦截对被观察对象的属性的访问和修改操作。
当你访问或修改被观察对象的属性时，实际上是通过 Proxy 对象来实现的，这样 MobX 就能够监听到这些操作并触发相应的响应式更新。

那么我们怎么将数据转换为我们可以正常使用的类型呢？

我们需要引入 Mobx 库中的 toJS（）函数包裹我们需要转换的数据即可

console.log(menuListStore.menuList);
// 输出如下

在这里插入图片描述

将其改为 toJS（）包裹的对象

console.log(toJS(menuListStore.menuList));

在这里插入图片描述
变为了可以直接使用的数据

I will.874
关注
  • 3
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
React Native中Mobx的使用方法详解
10-17
它们会在数据改变时自动运行，以反映最新的状态。 4. **Derivations（派生状态）**：派生状态是从其他状态自动计算得出的，无需手动监听和更新。`@computed`装饰器用于创建派生状态。 ** 在React Native中集成MobX...
Proxy详解，运用与Mobx
weixin_34129145的博客
12-17 1547
本文简单阐述一点元编程的知识，然后较为详细的给出 Proxy 的有关用法（起码比 MDN 详细，补充了各种错误情况的具体示例，且比上面的机翻准确），再用一些例子讲述 Proxy 适合在什么场景下使用 元编程 首先，在编程中有以下两个级别： 基本级别/应用程序级别：代码处理用户输入 元级别：代码处理基本级别的代码 元( meta ) 这个词缀在这里的意思是：关于某事自身的某事，因此元编程( me...
Vue3和Mobx5都使用Proxy了，你更应该了解Proxy
web全栈开发的博客
04-19 494
推荐一款面试题小程序 微信 搜索 MST题宝库 vue3.0的pre-alpha版代码已经开源了，就像作者之前放出的消息一样，其数据响应这一部分已经由ES6的Proxy来代替Object.defineProperty实现，感兴趣的同学可以看其实现源码，同样Mobx5也使用Proxy来实现数据响应式。vue和mobx都开始使用Proxy来实现数据的响应式了，所以有必要抽点时间了解下Proxy。 Object.defineProperty的缺陷 说到Proxy，就不得不提Obj...
高效的 MobX
热门推荐
canduecho的专栏
02-27 1万+
前言由于最近开启一个新的个人小项目，准备还是使用 React 及其生态来实现整个技术架构，之前一直使用的是 React + React-Router + Redux 组合，虽然说使用 Redux 来管理整个应用的数据流有着优点，但是 Redux 的写法繁琐也确实让人诟病，当然这里并不是说 Redux 不好。基于项目本身并不大，决定寻找一个新的解决方案，而 MobX 在之前就有所耳闻（只是一直没有时...
MobX 的 Observable Array，如何转换成一个普通的数组
最新发布
T3165919332的博客
01-19 692
访问mobx store里面的数据时打印结果为如下，是一个 MobX 的 Observable Array，而不是一个普通的数组。MobX 使用 Proxy 来实现响应式数据，因此打印的结果为的是 Proxy 对象。可是我需要的是实际的数组数据。如果你想要访问实际的数组数据，可以通过调用 MobX 的。函数将其转换为普通 JavaScript 对象。
harmonyos2-react-mobx-translatable:使用MobX使React组件可翻译
07-01
注意：此插件依赖于当前标记为实验性的mobx-react功能： Provider和inject 。 安装 npm install react-mobx-translatable 用法 清单（有关更多详细信息，请参见示例） 在商店中设置 i18n 对象 初始化和翻译 使用...
在微信小程序中使用mobx
08-10
1. **State（状态）**：在MobX中，任何可变的数据都可以被视为状态。通过`@observable`装饰器，我们可以将普通的JavaScript对象或属性标记为可观察的。 2. **Actions（动作）**：改变状态的行为应该在`@action`中...
为你的小程序提供 mobx 数据层驱动
03-29
为你的小程序提供 mobx 数据层驱动 微信小程序经过一段时间的发展, 生态已经比较强大了, 我认为它未来将取代微信服务号的地位, 成为另一个重要的入口. 但开发相对复杂的小程序是一个比较有挑战的事, 其重要原因在于...
umi-plugin-mobx:in在umijs中正常使用mobx-state-tree
03-21
:smiling_face_with_heart-eyes:与umi一起使用mobx-state-tree 。 :sparkles:特征 自动使用状态树节点包装路线组件。 通过使用umi/dynamic支持动态导入状态树节点。 使用Mobx生态系统而不是Redux。 解析规则与umi-...
使用Mobx传递数据时，遇到了数据无法取出的情况，返回Proxy包着一堆ObservableArrayAdministration数组
yvette5785的博客
04-25 2666
解决方法： ......................... 引入TOJS函数，把数组强行转化为JS数组就完啦！ 还有一个方式就是使用数组的slice函数，不过这个无法去除外面那一层Proxy。 mobx的observable机制，是为了监控数据的改变，让可变变量比较好控制；本身继承了JS数组的许多函数，实际上observable用起来也和js数组差不多的啦，看个人需求了。...
【mobx】toJS之后依赖值没变，useEffect多次调用的问题
mytac的博客
01-24 2219
父组件中传递引用类型的props，在子组件中即使实际上的值没有改变也会触发。因为useEffect的依赖值如果为引用类型，react对其进行浅比较，浅比较只是对比是否为同一个对象的引用，将会在每一次render中被触发。 父组件 <KonvaCanvas // ... stepInfo={toJS(store.stepInfo)} /> 子组件 useEffect(() => { console.log('
从零开始用 proxy 实现 Mobx
weixin_34238642的博客
05-22 206
dynamic-object 只对外暴露了三个 api：observable observe Action，分别是 动态化对象、 变化监听 与 懒追踪辅助函数。 下面以开发角度描述实现思路，同时作为反思，如果有更优的思路，我会随时更新。 1. 术语解释 本库包含许多抽象概念，为了简化描述，使用固定单词指代，约定如下： 单词 含义 observable dynamic-object 提...
Mobx 源码解析 二（autorun)
weixin_33834137的博客
09-18 314
前言 我们在Mobx 源码解析 一（observable）已经知道了observable 做的事情了， 但是我们的还是没有讲解明白在我们的Demo中，我们在Button 的Click 事件中只是对bankUser.income 进行了自增和自减，并没有对incomeLabel进行操作， 但是incomeLabel 的内容却实时的更新了， 我们分析只有在mobx.autorun 方法中对其的inne...
使用 proxy 实现的 mobx - dob 介绍
weixin_33714884的博客
09-06 150
一共有两个套件： dob 类比 mobx dob-react 类比 mobx-react dob 优势，就是由于使用了 proxy，支持跟踪不存在的变量，比如： import { observe, observable } from 'dob' const dynamicObj = observable({ a: 1 }) observe(() =&gt; { cons...
Mobx使用详解
风雨无阻，执着追求!!!
07-15 6871
Mobx是一个功能强大，上手非常容易的状态管理工具。就连redux的作者也曾经向大家推荐过它，在不少情况下你的确可以使用Mobx来替代掉redux。 本教程旨在介绍其用法及概念，并重点介绍其与React的搭配使用。 先来看看最基本的用法。 observable和autorun import { observable, autorun } from 'mobx'; const value
React使用mobx,mobx-react组织多个store最佳实践
roamingcode的博客
08-17 9725
使用mobx进行状态管理相比于redux显得更加的轻量级,mobx采用响应式编程,主要采用观察者模式,redux使用不开心不妨试试mobx 下面主要说明在项目中使用mobx如何友好组织多个store,以及在view层注入我们想使用的store store.js import {observable} from 'mobx'; class UserStore { constructo...
Concis组件库封装——Loading加载中
量子前端的博客
06-22 1989
一个常规的react loading组件的开发和测试
react函数组件使用mobx
05-30
要在 React 函数组件中使用 MobX，需要使用 `observer` 函数将组件包装起来，以便 MobX 能够追踪组件状态的变化。 首先，需要在组件文件中引入 `observer` 和 `useObserver`： ```javascript import { observer, useObserver } from "mobx-react-lite"; ``` 然后，将组件包装起来： ```javascript const MyComponent = observer(() => { // 组件代码 }); ``` 在组件内部使用 `useObserver`，可以让 MobX 追踪到组件状态的变化并重新渲染组件： ```javascript const MyComponent = observer(() => { const { store } = useStore(); // 获取 MobX Store return useObserver(() => ( <div> <h1>{store.title}</h1> <button onClick={() => store.changeTitle("New Title")}>Change Title</button> </div> )); }); ``` 其中，`useStore` 是一个自定义的 Hook，用于获取 MobX Store。在组件内部使用 `useObserver` 包裹需要追踪的状态，这里是 `store.title`。当 `store.title` 发生变化时，组件会自动重新渲染。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值