添加到可观察的数组时，mobx反应无法触发
mobx是一款流行的JavaScript状态管理库，用于构建响应式的Web应用程序。当我们向mobx的可观察数组添加元素时，mobx的反应系统可能无法自动触发更新。
mobx的反应系统是基于观察者模式实现的，它会自动追踪和更新与状态相关的组件。当状态发生变化时，mobx会自动通知相关的组件进行更新。
然而，mobx的反应系统对于可观察数组的变化有一些限制。当我们向可观察数组添加元素时，mobx无法自动检测到这个变化，因为它只能追踪数组的引用变化，而不是数组内部元素的变化。
为了解决这个问题，我们可以使用mobx提供的一些方法来手动触发反应系统的更新。以下是一些常用的方法：
- 使用
observable.array([])创建可观察数组：在创建可观察数组时，我们可以使用mobx提供的observable.array([])方法来确保mobx能够正确地追踪数组的变化。 - 使用
observable([...])创建可观察对象：如果我们需要将数组作为对象的属性，并希望mobx能够追踪数组的变化，可以使用observable([...])方法将数组包装成可观察对象。 - 使用
extendObservable方法：如果我们已经有一个普通的JavaScript数组，并且希望将其转换为可观察数组，可以使用extendObservable方法将其转换。 - 使用
autorun方法手动触发更新：如果我们无法使用上述方法，可以使用autorun方法创建一个响应式函数，并在函数内部访问可观察数组，这样mobx就能够正确地追踪数组的变化。
总结起来，当我们向mobx的可观察数组添加元素时，mobx的反应系统可能无法自动触发更新。为了解决这个问题，我们可以使用mobx提供的方法来手动触发反应系统的更新。具体的方法包括使用observable.array([])创建可观察数组、使用observable([...])创建可观察对象、使用extendObservable方法将普通数组转换为可观察数组，以及使用autorun方法手动触发更新。
腾讯云相关产品和产品介绍链接地址：
- 腾讯云云开发：https://cloud.tencent.com/product/tcb
- 腾讯云云原生应用引擎：https://cloud.tencent.com/product/tke
- 腾讯云云服务器（CVM）：https://cloud.tencent.com/product/cvm
- 腾讯云数据库（TencentDB）：https://cloud.tencent.com/product/cdb
- 腾讯云人工智能（AI）：https://cloud.tencent.com/product/ai
- 腾讯云物联网（IoT）：https://cloud.tencent.com/product/iotexplorer
- 腾讯云移动开发（MPS）：https://cloud.tencent.com/product/mps
- 腾讯云对象存储（COS）：https://cloud.tencent.com/product/cos
- 腾讯云区块链（BCS）：https://cloud.tencent.com/product/bcs
- 腾讯云游戏多媒体引擎（GME）：https://cloud.tencent.com/product/gme
- 腾讯云音视频处理（VOD）：https://cloud.tencent.com/product/vod
相关·内容
Mobx同时支持@可观和@observable.ref修饰符，他们的官方文档说
observable: This is the default modifier, used by any observable我不明白为什么我们需要为已经存在的可观察到的情况建立一个可观察的参考资料。这两种情况有何不同?它们的用例是什么？
浏览 3提问于2019-11-14得票数 6
回答已采纳
当向可观察数组中添加或从可观察数组中删除项时，我尝试触发mobx反应。目前仅在移除项目时触发 type QueryParam = { value: string }} updateTestRunFilter中的conso
浏览 65提问于2020-10-30得票数 0
回答已采纳
1回答
我试着听当前导航参数的变化。}指纹：a undefinedR undefinedR {a: "b"}如何观察当前的
浏览 0提问于2018-04-22得票数 1
回答已采纳
Mobx在javascript中实现了可观察模式。通过使用mobx和mobx- react，人们可以在react中引用mobx观察值，并为它们分配自动运行、反应和计算例程。每次可观察对象改变其引用关系时，都会触发自动运行、反应和计算例程。虽然js信号的工作方式不同，但信号可以注册回调及其优先级。当组件
浏览 7提问于2018-05-14得票数 1
我在React和Three.js中使用mobX。在React组件中渲染Three.js场景。我使用mobX存储在普通React组件和3D场景中呈现的信息(这不是一个图形或React问题)。为了在mobX存储中发生相关更改时更新ThreeJS场景，我有一个自定义反应：import { observer, inject }matchStore.territories是从可观察对象计算得到
浏览 20提问于2019-08-02得票数 0
回答已采纳
有时我无法避免在异步回调中调用mobx.computedFn函数。is set
可以选择将keepAlive标志添加到每个受影响的computedFn，keepAlive:如果没有人观察到这个计算值，
浏览 5提问于2020-08-25得票数 1
因此，我在我的应用程序中使用一个普通的React组件库和MobX作为状态管理。当我有一个可以观察到的数组作为数据，并且我想把它从我的组件(这是一个mobx-react observer)传递给UI库的组件(这个支柱是PropTypes.array的类型)时，组件拒绝它，说我的可观察数组是一个对象，而不是一个数组。React.Co
浏览 2提问于2017-05-22得票数 3
回答已采纳
1回答
不被嵌套观测物触发的反应
、、、、
我有一个具有嵌套可观测属性的可观测类： @observable name: string = ""; this.todos.push(todo); makeObservable(this);}reaction(
() =&
浏览 3提问于2022-05-05得票数 0
回答已采纳
function MaterialTable<RowType>(props: MaterialTableProps<RowType>) {}当我在我的应用程序中使用这个组件时，我为它提供了一个基于MobX的TableStore。我希望只要基于MobX的存储发生变
浏览 8提问于2019-07-30得票数 1
回答已采纳
1回答
我知道MobX可以检测对象属性何时发生变化(在我们的例子中是myData.name)，但是MobX如何知道User组件取决于 myData.name @observableUser extends Component { // here, User depends on myData.name, but how MobXmyData} />, document.getElementById(&
浏览 0提问于2018-06-12得票数 2
相反，Mobx将跟踪标记为observable的对象的所有属性(考虑到这些属性是在对象创建期间出现的)。但在下面的代码中，我没有看到两种行为之间的任何变化。类似地，asFlat允许属性本身是可观察的，而不是它的任何子属性。这意味着向标记为asFlat的数组添加新值不会触发更改，但更改数组的引用将触发更改。但是，在下面的代码中，两个数组</
浏览 2提问于2017-11-28得票数 2
我和mobx有个问题。事实上，我有一个简单的聊天室，它使用我自己定义的WebSocketService。虽然这个服务用我的API抽象交换，但是聊天本身处理消息的存储。createBrowserHistory} from 'history';import {Provider} from "mobx-react";
import {Logg
浏览 0提问于2019-09-13得票数 0
回答已采纳
我有一个在typescript中执行一些工作的项目。， private static jobStreams: Map<string, Job> = new Map(); 在我的代码中，当作业的状态发生变化时，比如用户选择“暂停”作业时，需要通知我。将相应的地图对象状态设置为“已暂停”， jobStreams.set(job.jobId).jobState = 'Paused'; 我想知道当作业状态改变时如何触发事件？我将在作业上执行一些活
浏览 34提问于2019-04-26得票数 0
2回答
标题几乎是自我解释的。我找不到关于它的任何信息。RxJ的角度使用RxJ，遮罩下的可观测值在React和MobX中也是一样的吗？
浏览 0提问于2018-12-10得票数 13
回答已采纳
2回答
setData(items = []) { }然后我在我的反应视图中观察到了那家商店视图工作得很好(尽管InfluencerFeedStore.data数组中没有项)。如果我稍后通过调用InfluencerFeedStore.setData()加载项，React将正确地尝试重新呈现Feed视图(因为它注意到mobx可观察到已更新).但我
浏览 6提问于2016-12-01得票数 4
回答已采纳
创建一个动态键控可观察的地图。如果你不想仅仅对特定条目的变化做出反应，而是对条目的添加或删除做出反应，那么可观察到的地图是非常有用的。
我可能是唯一一个不理解这两种mobx可观察类型的区别的人。甚至医生说map可以跟踪添加或删除，当一个新值被推入数组时，下面的数组也会由autorun通知控制台。那么两者之间真正的区别是什么呢？
浏览 1提问于2017-12-17得票数 1
我在近半年的项目中使用了MobX + React。我们只使用“观察者”，“计算”，反应，有时
有人能为使用自动运行、拦截和观察展示真正有用的案例吗？
浏览 3提问于2020-04-12得票数 1
回答已采纳
我对getDerivedStateFromProps如何与Mobx可观察对象一起工作有一些误解。我知道，Mobx会对“读取”属性(通过"dotting into")、可跟踪函数等做出反应。例如，我使用可观察对象进行存储。this.status.state = 'STARTED';
this.status.state = 'ENDED';接
浏览 0提问于2019-04-03得票数 2
1回答
如何观察接口数组。所以我声明了一个接口： Id: number; Show: boolean;在我的componentWillMount()中 this.data = observable(this.props.boxes as IBox[]);如果Show的值发生更改
浏览 1提问于2018-05-24得票数 2
使用需要传递给组件的道具的路由，我正在传递一个从我的商店中可以观察到的布尔值。当此值更改时，路由呈现的组件不会更新。如果我更改了可观察到的，组件"MyComponent“不会被重新呈现或通知更改。<div idk={this.props.MyMobxStore.ShowMyComponentLoader}&#x
浏览 0提问于2018-03-15得票数 2
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
即时通信 IM
腾讯会议活动推荐
腾讯云开发者
