mobx state更新视图不更新

最新推荐文章于 2023-04-20 17:38:18 发布
最新推荐文章于 2023-04-20 17:38:18 发布
阅读量1.1k 收藏
点赞数
文章标签： reactjs
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_41515773/article/details/109474209
版权

在ts+react项目中
刚开始使用的版本是"mobx": “^6.0.2”,
“mobx-react”: “^7.0.0”,每次修改store里面的数据，在store里面都是可以console出新的数据的，但是就是不能更新到视图上
刚开始使用的是强制去刷新组件，使其能得到最新的数据，每次数据操作完了后就用useState hook去更新组件
具体

  const [fresh,setFresh]  = useState(true)
	执行完操作后就
	setFresh(!fresh)

想了想这不是办法，于是通过多次实验才发现好像最新的版本有问题，通过回溯老版本就解决了问题
更改成 以前的版本 问题解决"mobx": “5.15.4”,
“mobx-react”: “^6.2.2”,

qq_41515773
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
react-mobx-state-tree-demo:利用react，mobx-state-tree和一些antd组件
05-15
当状态改变时，MobX会智能地计算出需要更新的部分，确保视图与状态同步。这种"自动数据绑定"的特性简化了状态管理，尤其在大型项目中，可以减少手动管理状态的复杂性。 **MobX State Tree (MST)**：作为MobX的一个...
mobx系列(五)-Mobx常见问题及解决方案（2）observable state更新后组件不主动更新问题
热门推荐
smk108的博客
04-29 1万+
在《mobx系列(二)-mobx主要概念》中解释过mobx对什么作出反应，如果对这一部分内容理解不清楚，开发中经常会遇到store中状态更新了，但是组件没有重新渲染的问题。本文简单列举几种情况及解决方法。 1、缓存observables 属性并存储在本地 这是文档中的一个示例，指的是从 observable 属性中提取数据并存储，这样的数据是不会被追踪的： class User { @...
react 精华之mobx 意味着只要我们state的状态在store中被修改了 this.count 这个 参数就会被监听到 就可以直接渲染页面了
gwdgwd123的博客
12-16 3226
理解 Mobx 虽然 Mobx 和 Redux 有很大不同，但是至少还有一个共同点——这两个工具都和 React 没有任何直接关系，只不过凑巧 React 社区大量使用它们罢了。从技术上说，Mobx 和 Redux 都是中立的状态管理工具，他们能够应用于 React，也可以用于其他需要状态管理的场景。 还是用 create-react-app 产生的应用来演示 Mobx 吧，要使用 Mobx，...
mobx6，state更新后。react试图没有更新
wq123123423432的博客
10-04 273
mobx最新版本，state更新后不会自动刷新react试图，需要在state中添加 makeObservable class State{ constructor() { makeObservable(this); } }
React组件内部使用useEffect追踪Mobx的store数据变化，页面引用数据不会实时更新的解决办法
na596的博客
04-20 1288
使用mobx中的api antorun，具体方法如下。
react使用mobx6 store变化组件没有更新
qq_26889291的博客
06-01 1012
store.js文件 解决方法用mobx-react-lite的observer包裹我们组件就可以驱动组件更新了 组件引入
mst-async-task：在Mobx-State-Tree中管理异步任务
02-08
5. **监听任务状态**：由于MST的反应性，我们可以监听`Task`的状态变化，一旦状态改变，相关的视图就会自动更新，实现数据驱动的用户体验。 **集成到MST树** 在MST的store中，我们可以将`Task`模型作为一个子树来...
在微信小程序中使用mobx
08-10
1. **State（状态）**：在MobX中，任何可变的数据都可以被视为状态。通过`@observable`装饰器，我们可以将普通的JavaScript对象或属性标记为可观察的。 2. **Actions（动作）**：改变状态的行为应该在`@action`中...
mobX:app daudemy
03-27
当这些对象的状态发生变化时，依赖它们的视图会自动更新。MobX的核心理念是“任何被观察的数据变化都会自动触发所有依赖它的计算”。 2. **Dart语言**: Dart是Google推出的一种面向对象的、类C语法的编程语言，广泛...
mobx状态管理库可替代Redux
08-11
这意味着开发者只需定义可观察的数据结构，然后让MobX自动处理数据变化的监听和更新。这与Redux要求手动编写动作和reducer的方式形成了鲜明对比。 **MobX的核心概念** 1. **可观察对象（Observables）**：在MobX中...
mobx视图不自动更新问题
Mr.康的博客
01-07 2580
react native使用mobx视图不自动更新问题 最近在新项目中使用mobx+react时，发现在触发事件后mobx的状态虽然变了，但react视图没有更新。 主要是因为mobx为6.0.0以上的版本，mobx的将属性变为可观察的语法变了。 由原来的使用@observable注解变成了使用makeAutoObservable.示例如下： 5.0写法 class Test{ @observable name=""; } 6.0写法 class Test{ name;
mobx中跟新了数据视图没变化_vue视图不更新情况
weixin_39699313的博客
11-20 517
我们有时会会在处理vue项目的时候，遇到数据变化了，但是视图并没有实时渲染的情况vue视图为什么不渲染页面的原因当你把一个普通的 JavaScript 对象传给 Vue 实例的 data 选项，Vue 将遍历此对象所有的属性，并使用 Object.defineProperty 把这些属性全部转为 getter/setter。Object.defineProperty 是 ES5 中一个无法 shi...
mobx中跟新了数据视图没变化_「前端架构」Redux vs.MobX的权威指南
weixin_39630735的博客
11-06 122
大型应用程序的前端管理是最难解决的问题之一。虽然有几种方法可以解决状态管理问题，但Redux和MobX是两个最流行的外部库，用于解决前端应用程序中的状态管理问题。在这篇文章中，我们将研究每个库以及它们是如何匹配的。本文假设您对web应用程序中的状态管理工作有一个基本的了解。普通JavaScript和Redux框架都适用于普通或不可知的框架。ReduxRedux是一个流行的状态管理解决方案，它结合了...
mobx中跟新了数据视图没变化_高级Web开发必备：Mobx入门和进阶
weixin_40009099的博客
11-21 292
Mobx 数据管理模式，通过行为修改状态，然后更新到视图。Mobx 的写法 mobx 采用了ES7 语法的修饰器function setAge(target){ target.age = 28;}@setAgeclass Person {}// 等同于Person = setAge(Person) || Person;console.log(Person.age);利用装饰器代理函数使用起来更方便...
mobx数据更新，组件未刷新问题（含处理方案）
晴天有何特别
10-17 6927
在这里我不得不吐槽一下我遇到的这个问题 我上一个测试项目使用mobx完全没问题，结果我正式项目一上mobx，出毛病了，代码流程都是一样，但他操作成功，数据更新，就是不刷新组件我真是服气了，网上找了好久都没找到有用的文章，我真的自闭了，但是mobx也不能放弃，我硬着头皮看啊，搜索文章，看api，完全摸不着头脑，最后我想到一个点，我去看了一下mobx版本,发现问题 这是不能正常使用的情况,版本6.0了我第一次使用这玩意儿哪知道啊， "mobx": "^6.0.1", "mobx-react
mobx数据变了，但是没有同步更新到页面？
坚持原创
03-24 1954
可能是mobx和mobx-react版本太高的原因，于是我尝试降低版本，确实，成功了 npm i mobx@5.0 -D npm i mobx-react@5.0 -D 安装完之后重新启动项目，就实现了数据双向绑定的效果 输入框输入的值可以同步到页面 ...
mobx界面不刷新的解决方法
yuxinaibiancheng的博客
08-24 2575
在一些复杂的场景，需要多个组件共同工作，这样就需要使用mbox这些组件来完成。 mobx在mobx6之后，刷新界面需要设置makeObservable(this);这个函数，这样当数据刷新后，组件的界面才能刷新。下面我们直接上代码： store/index.js的代码： import app from './modules/app.js'; let store={ appStore:app } export default store; store/modules/app.js的代码： i
mobx怎么触发state改变
最新发布
07-09
在 MobX 中，可以通过两种方式触发状态（state）的改变： 1. 使用 `@observable` 装饰器：通过在状态属性上添加 `@observable` 装饰器，使其成为可观察的状态。当状态属性发生改变时，MobX 会自动追踪这些变化并...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值