使用Mobx传递数据时，遇到了数据无法取出的情况，返回Proxy包着一堆ObservableArrayAdministration数组

最新推荐文章于 2024-02-05 21:13:05 发布
最新推荐文章于 2024-02-05 21:13:05 发布
阅读量2.6k 收藏 1
点赞数 2
文章标签： react
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/yvette5785/article/details/105756909
版权

解决方法：

 

.........................
 

 

引入TOJS函数，把数组强行转化为JS数组就完啦！
 

还有一个方式就是使用数组的slice函数，不过这个无法去除外面那一层Proxy。
 

mobx的observable机制，是为了监控数据的改变，让可变变量比较好控制；本身继承了JS数组的许多函数，实际上observable用起来也和js数组差不多的啦，看个人需求了。
 

mobx官网：https://cn.mobx.js.org/

                

        

        

    




    

      

        

            

              
                
                  yvette5785
                
              
            

            

                关注
              
            

        

        

          
    
            
  • 
              
                
                
                
                
                    2
                
              
              
    点赞
    
            
    • 
            
  • 
              
                
                
                
              
              
    踩
    
            
    • 
            
  • 
              
                
                
                
                
                    1
                
              
              
    
                
    
                  
                    收藏
                  
                
    
              
    
              
    
                
    
                  觉得还不错?
                  
                    一键收藏
                  
                 
                
    
              
    
            
    • 
          
  • 
            
    
              
              
            
    
              
              
              
                    0
              
            
            
    评论
    
          
    • 
          
  • 
          
    • 
          
  • 
            
              
            
              
    
            
              
                
            
    
          
    • 
        

      

      










                



	

		

			

				
					
为你的小程序提供 mobx 数据层驱动

				
			

			

				

					03-29
				

			

		

		

			
				
但开发相对复杂的小程序是一个比较有挑战的事, 其重要原因在于小程序框架的数据管理能力偏弱, 无法直接跨页进行数据共享. 于是, 我们造了一个轮子: wechat-weapp-mobx , 能够让小程序添加 mobx 数据层驱动. mobx ...

			
		

	



                

              
                



	

		

			

				
					
React Native中Mobx的使用方法详解

				
			

			

				

					10-17
				

			

		

		

			
				
总结起来，MobX在React Native中的使用通过创建可观察的状态、动作和反应，提供了一种声明式的方式来管理应用状态。其透明性和自动化更新机制降低了状态管理的复杂性，使得开发者能够更加专注于业务逻辑，而不是繁琐...

			
		

	



                


  
              

                


	

		

			

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

					
最新发布

				
			

			

				

					qq_60754128的博客
				

				

					02-05
					
					346
					
				

			

		

		

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

			
		

	





	

		

			

				
					
MobX 的 Observable Array，如何转换成一个普通的数组

				
			

			

				

					T3165919332的博客
				

				

					01-19
					
					715
					
				

			

		

		

			
				
访问mobx store里面的数据时打印结果为如下，是一个 MobX 的 Observable Array，而不是一个普通的数组。MobX 使用 Proxy 来实现响应式数据，因此打印的结果为的是 Proxy 对象。可是我需要的是实际的数组数据。如果你想要访问实际的数组数据，可以通过调用 MobX 的。函数将其转换为普通 JavaScript 对象。

			
		

	



		

			
		



	

		

			

				
					
vue3.0中从proxy中取值

				
			

			

				

					weixin_44384273的博客
				

				

					02-01
					
					1966
					
				

			

		

		

			
				
vue3.0 proxy

			
		

	





	

		

			

				
					
Mobx 入门

				
			

			

				

					一只蒻蒻的博客
				

				

					09-08
					
					1100
					
				

			

		

		

			
				
Mobx的基本使用
Mobx环境准备

在react项目中安装 Mobx 和 Mobx-react

npm install mobx mobx-react


安装装饰器插件

npm install @babel/plugin-proposal-decorators
// 装饰器的一个插件



此时使用装饰器@xx会报错对修饰器的实验支持是一项将在将来版本中更改的功能。设置"experimentalDecorators"选项以删除此警告。
解决方案：搜索experimentalDecorators，设

			
		

	





	

		

			

				
					
mobx-collection-store:MobX的数据收集存储

				
			

			

				

					05-02
				

			

		

		

			
				
 MobX的结构化数据存储。 部分受影响。 弃用和迁移 mobx-jsonapi-store和mobx-collection-store来支持它遵循相同的概念，但是增加了对MobX 4和5的支持，更好的TypeScript支持和更多的可扩展性。  如果您不熟悉这些库...

			
		

	





	

		

			

				
					
mobx-async-store:基于Mobx的数据获取和状态管理库

				
			

			

				

					04-29
				

			

		

		

			
				
基于Mobx的存储，用于异步数据获取和状态管理。  警告 该库是实验性的，不建议用于生产用途。 去做  改善文件 目录 介绍 开发设置 测验 分配 安装 用法 通过扩展Model创建Model  通过扩展Store创建Store  初始化商店...

			
		

	





	

		

			

				
					
前端项目中数据传递的几种“姿势”

				
			

			

				

					01-20
				

			

		

		

			
				
当子组件需要向父组件传递数据时，可以使用事件发射机制。子组件触发一个自定义事件，并携带所需数据，父组件监听这个事件并处理数据。Vue中，可以使用`$emit`来触发事件，`@event`来监听。  ```html ...

			
		

	





	

		

			

				
					
react mobx 数据更新小坑记录

				
			

			

				

					csdnnname的博客
				

				

					08-11
					
					1382
					
				

			

		

		

			
				
react 数据更新小坑记录

一开始使用图片中注释的写法，页面中渲染的数据是异步获取之前的数据，注释中的写法是从vue项目vuex复制过来的，vue项目中使用的是this.$set赋值，到了react中以为改为直接赋值就好了，结果是异步获取的数据无法渲染，后改为map，返回一个新数组才会重新渲染页面，react要改变对象才会渲染，检测不到对象中的数据变化，特此记录。

...

			
		

	





	

		

			

				
					
Mobx出现的问题及其解决方案

				
			

			

				

					weixin_46347206的博客
				

				

					08-17
					
					878
					
				

			

		

		

			
				
由于浏览器不支持@，所以在下载完mobx完成配置后启动项目是会有报错！！！！！

报错：



而我们要解决这个问题需要两步：

第一步：

我们需要安装两个插件


yarnadd@babel/plugin-proposal-decorators

yarnadd@babel/plugin-proposal-class-properties


第二步：修改package.json文件

将以下代码


"presets": [
      "react-app"
    ]

修改成：


"...

			
		

	





	

		

			

				
					
React中render()下获取子级数据错误问题

				
			

			

				

					前端小白的逆袭
				

				

					09-29
					
					482
					
				

			

		

		

			
				
今天React+antd+mobx项目开发的时候，遇到了一个问题，应该是生命周期渲染问题吧。
具体是这样的：
代码位于render(){}中，这里假定我要获取data.questionnaiteProblemList下的第一项的id。data是获取到的数据对象，其中包含一个对象数组questionnaireProblemList，为了后续代码使用方便，我将其赋值给queList。这里的console自动执行了两次。
render（）{
const data = this.props.wjdc.home.qu

			
		

	





	

		

			

				
					
mybatis没有clob类型_mybatis 处理CLOB/BLOB类型数据

				
			

			

				

					weixin_26848497的博客
				

				

					12-29
					
					857
					
				

			

		

		

			
				
blob和clob都是大字段类型。blob是按二进制来存储的，而clob是可以直接存储文字的。通常像图片、文件、音乐等信息就用blob字段来存储，先将文件转为二进制再存储进去。文章或者是较长的文字，就用clob存储.blob和clob在不同的数据库中对应的类型也不一样:mysql 中：clob对应text/longtext，blob对应bloboracle中：clob对应clob，blob对应bl...

			
		

	





	

		

			

				
					
mobx判断observable中值类型是数组还是对象

				
			

			

				

					Jane_96的博客
				

				

					09-06
					
					4129
					
				

			

		

		

			
				
在使用mobx过程中，需要判断observable中的值的类型是否是数组，然后有了如下写法：

Array.isArray(this.props.defaultStore.result)

结果是： 
无论result里面是不是数组，表达式都返回false。。 


查看了一下官方文档，发现官方文档里面有这么一段话


  请记住无论如何 Array.isArray(observable([]))...

			
		

	





	

		

			

				
					
Knockout学习（3）之observableArray，监控数组，列表（循环绑定）

				
			

			

				

					qq_33265875的博客
				

				

					06-12
					
					5236
					
				

			

		

		

			
				
ko对于数组列表，监控跟踪属性值关键字为：observableArray，                         绑定值关键字为：foreach@{
    ViewBag.Title = "Index3";
}

<h2>Index3</h2>
<head>
    <script src="~/Scripts/jquery-1.10.2.mi...

			
		

	





	

		

			

				
					
mobx 源码解读（二）：都 observe object 了，其他类型还会远吗

				
			

			

				

					jeffery5461的博客
				

				

					11-16
					
					556
					
				

			

		

		

			
				
原文地址：observable-other-type
文本是 mobx 源码解读系列 第二篇
本系列文章全部采用 mobx 较新版本：v5.13.0
mobx 源码解读 issue，欢迎讨论
技术前提
在阅读之前，希望你对以下技术有所了解或实践，不然可能会影响你对本文的理解


ES6 装饰器：decorator


ES6 代理：proxy


ES6 反射：reflect


定义对象属性：O...

			
		

	





	

		

			

				
					
mobx中的“数组”由监听者格式转变成真正的数组

				
			

			

				

					supercolorpower的博客
				

				

					11-01
					
					2483
					
				

			

		

		

			
				
store 中的数组.slice()  


			
		

	





	

		

			

				
					
mobx 中使用数组报错等问题的原因

				
			

			

				

					weixin_30699831的博客
				

				

					08-15
					
					543
					
				

			

		

		

			
				
mobx中如果将数组作为可观察. 可以通过添加修饰符observable或者调用observable方法.
很多的时候, 我们将此修饰为可观察的对象后, 就随处可用了.
比如,采用 map forEach indexOf find 等原生数组可用的方法在此都可以使用.
但是没有注意到一个问题, 其实这个对象在控制台中打印的时候已经变成了 Observable 的 Array
已...

			
		

	





	

		

			

				
					
页面内可以改变mobx的数据吗

				
			

			

				

					05-13
				

			

		

		

			
				
在上面的示例中，`increment`和`decrement`方法都使用`@action`装饰器来标记它们是可以改变MobX store中数据的action函数。当在页面中调用这些方法时，它们将自动触发MobX的重新计算和重新渲染过程。

			
		

	



              




          




        



    





    



      

      

        
      

      





	

		评论	
	

	
	




  

    

      添加红包
      
    

    

      

        
        

          
          
        

        
请填写红包祝福语或标题

      

      

        
        

          
          个
        

        
红包个数最小为10个

      

      

        
        

          
          元
        

        
红包金额最低5元

      

      

        
        

          当前余额3.43元
          前往充值 >
        

      

      

        

          需支付：10.00元
        

        
        
      

    

  





  

    
    
  

  

    
    
  








  

    

      

        

          

            
            
成就一亿技术人!

          

          

        

        

          

          

            领取后你会自动成为博主和红包主的粉丝
            规则
          

        

      

      

        

          

            
              
            
            

              
hope_wisdom
 发出的红包
            

          

        

        

          

          

          

        

      

    

    

  



      
      

      
实付元

      
使用余额支付

      

        

          

            
            点击重新获取
          

        

        
扫码支付

      

      

        
          
            
          
          
        
      

      

        
        钱包余额
          0
          

            
            

              

                
抵扣说明：

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

              

            

          

      

      余额充值