React native Mobx 数据更新不渲染页面问题

最新推荐文章于 2024-01-16 01:51:03 发布

luke312

最新推荐文章于 2024-01-16 01:51:03 发布

阅读量1.2k

点赞数 2

文章标签： react native react

本文链接：https://blog.csdn.net/luke312/article/details/114337318

版权

在React Native中遇到Mobx数据更新但页面未渲染的问题，原因是Mobx从6.0版本开始，@observer不再自动更新。原本使用@observable的方式现在需要改为使用makeAutoObservable。

摘要由CSDN通过智能技术生成

React native中Mobx数据更新，页面却不渲染

原因：6.0版本更新后observer注解不会自动更新了

由原来的使用@observable注解变成了使用makeAutoObservable.

解决方法：

import {
    observable,action,makeAutoObservable } from "mobx"; 
class RootStore{
   
    
    constructor(){

最低0.47元/天解锁文章

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

luke312

关注关注

2
点赞
踩
1

收藏

觉得还不错? 一键收藏
1
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

React+Mobx｜基本使用、模块化

Coding and studying

08-18

1946

一个可以和React良好配合的集中状态管理工具，和Redux解决的问题相似，都可以独立组件进行集中状态管理mobx与react的关系，相当于vuex与vue的关系。redux、dva、recoil初始化Mobx的过程是怎样的？声明数据 -> 响应式处理 -> 定义action函数 -> 实例化导出Mobx如何配合react，需要依赖什么包？mobx-react-lite作为连接包，导出observer方法，包裹组件模块化解决了什么问题？维护性问题如何实现Mobx的模块化？......

mobx 6 视图更新，mobx props更新页面不渲染的坑

bug收集

11-05

3379

问题： react 项目中，使用mobx, 通过action 方法修改状态后，值都能打印出来，发生了改变。但是页面没有渲染原因： mobx 6 更新后，有变动, 不会自动进行更新，需要进行处理解决方案：需要在store仓库中添加 makeObservable import { makeObservable} from"mobx"; class OrderLine { constructor(){ makeObservable(this) } } expor...

1 条评论您还未登录，请先登录后发表或查看评论

mobx中跟新了数据视图没变化_vue视图不更新情况

weixin_39699313的博客

11-20

556

我们有时会会在处理vue项目的时候，遇到数据变化了，但是视图并没有实时渲染的情况vue视图为什么不渲染页面的原因当你把一个普通的 JavaScript 对象传给 Vue 实例的 data 选项，Vue 将遍历此对象所有的属性，并使用 Object.defineProperty 把这些属性全部转为 getter/setter。Object.defineProperty 是 ES5 中一个无法 shi...

使用mobx 渲染react-native FlatList控件观察数据发生变换未重新渲染

weixin_31032491的博客

04-22

926

在这里我们再FlatList中使用了curElement可观察数据，若我们curElement观察数据发生改变后，我们发现FlatList没有重新渲染，这是为什么呢？我们看看官方的解释吧~ 简单明了，我们只要在FlatList中加上extraData属性加上我们renderItem里所用到的对象就可以重新渲染啦~ <FlatList data={curProperty.i...

mobx数据变了，但是没有同步更新到页面？

坚持原创

03-24

1985

可能是mobx和mobx-react版本太高的原因，于是我尝试降低版本，确实，成功了 npm i mobx@5.0 -D npm i mobx-react@5.0 -D 安装完之后重新启动项目，就实现了数据双向绑定的效果输入框输入的值可以同步到页面 ...

mobx中跟新了数据视图没变化_BUG实录：渲染Mobx数据与界面不一致问题

weixin_39917485的博客

11-21

1257

Mobx是一个非常流行的状态管理器，他提供了优化应用状态与 React 组件同步的机制，目前在我们的React项目中大量使用，但是Mobx的初学者经常会遇到一些问题，不论这些问题表现怎么样，最终能概括为一句话：Mobx中数据改变了，但是页面没有变化。所以，我总结了我遇到过的所有的能导致这种不一致的情况。为了方便测试，我们以如下两段代码作为测试代码// 文件a 为了节约篇幅，下面的代码会删除impo...

reactnative 浅比较不渲染的问题

wangqiuwei07的专栏

07-26

915

我是从A页面跳转到B页面，B页面回传值A页面，然后A页面刷新。我遇到的问题是，我把dataSource数据改了以后，必须滑动一下页面才能把数据展示出来。两个坑： RN教程中对PureComponent这类组件有个介绍。本组件继承自PureComponent而非通常的Component，这意味着如果其props在浅比较中是相等的，则不会重新渲染。所以请先检查你的renderItem函数...

React Native中使用mobx

weixin_44114524的博客

08-24

1140

记录mobx的学习使用过程，并记录相关demo开发过程。

React-Native使用Mobx实现购物车功能

08-29

React-Native使用Mobx实现购物车功能在本文中，我们将主要讨论如何使用React-Native和Mobx实现购物车功能。 Mobx是一个流行的状态管理库，能够帮助我们更好地管理应用程序的状态。在React-Native中，我们可以使用...

使用 MobX 开发 React Native 应用 @observer 引用报错

m0_70083062的博客

04-29

639

passProps: { store: ListStore } }} /> ) } } AppRegistry.registerComponent(‘ReactNativeMobX’, () => ReactNativeMobX) 在入口文件中我们创建了一个基本的导航状态，并导入了新创建的数组存储器。在 initialRoute 中我们传入数据存储作为属性。我们还把已经创建的组件 App 作为初始路由。App 将会访问属性中的数据存储。在 configureScene 中，我们检查类型（typ

记录react redux store中item的值改变而页面未渲染的坑

waoecher的博客

11-08

889

我想实现的是一个组件能改变另一个组件button上面的text的功能，查阅了很多资料，决定用redux来实现，因为两个组件并不是父子组件的关系，套用起来会很麻烦。看网上很多人页面渲染不成功是直接在reducer里修改了state的值，从而导致页面未重新渲染，我尝试使用...object后，页面还是没有重新渲染。正确修改后的reducer: const button_text_reducer=(state,action)=>{ switch(action.type){

FlatList不更新（不重新渲染）问题

book_1992的专栏

05-28

7740

问题：修改了state的某个属性后，重新渲染视图的时候发现FlatList并没有更新原帖：https://segmentfault.com/q/1010000009665332给FlatList指定extraData={this.state}属性，是为了保证state.selected变化时，能够正确触发FlatList的更新。如果不指定此属性，则FlatList不会触发更新，因为它是一个Pure...

利用mobx的store中的变量变化引起页面都重新渲染的问题

All things will be fine__

04-03

5510

mobx中用observable的变量在组件中取值，如果其中一个变量变化，则该组件的render中所有元素都会重新渲染，如果只想render数据变化的那个组件，则需要把该部分功能单独写成一个子组件，在子组件中inject该变量所在的store，只把变化的值放在改子组件中变化，父组件不包含与该变量有关的内容，就不会重新渲染父组件，只会渲染子组件。父组件： import Stdout from...

react native ListView中数据变了,但是ListView不刷新的解决方法

LemonGirls的博客

09-14

9068

我采取的解决方法是， let newData = JSON.parse(JSON.stringify(dataSource._dataBlob.s1)); 以下是我使用时候的具体介绍。最近写ListView的时候遇到过数据变了,但是ListView不刷新的问题。具体情景是，ListView每一行是一个选择器，点击该行，该行的数据取反，相应的选择

React Native基于mobx 实现 listview列表默认选中，选中，取消选中

大灰狼的小绵羊哥哥的博客

03-31

3862

ListView 在移动开发中是个很常用对的控件，不管是andorid 还是ios，在显示长列表视图时，都是个不错的选择（ps：andorid有更好的新控件），那么在react native中也是如此，本文是从项目中摘出来的，是配合mobx来实现的，当然也可以用redux实现，不过个人觉得redux过于繁杂，不如mobx来的舒服，看有人说就用React的SetState 也可以，但是render

使用Intersection Observer接口实现可视区域渲染

yeyeye0525的博客

04-27

1199

本文首发于：https://github.com/bigo-frontend/blog/ 欢迎关注、转载。背景在图文列表渲染时，在较低配置的Android手机出现内存暴涨，无法回收导致客户端崩溃的情况，我们使用Android studio进行分析发现，问题出在了webview的图层渲染引擎。我们发现，随着我们下拉加载越多，图片量增多时，图层渲染Graphics部分内存持续上涨，且不存在回收的情况。因此，这种情况下，使用图片懒加载已经不能解决问题了。经过调研，我们采用了Intersection Obse.

深入了解 React Native 的状态管理解决方案