首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

无法将数据从fetch调用推送到mobx可观察对象数组中

问题描述: 无法将数据从fetch调用推送到mobx可观察对象数组中。

解答: 在使用fetch调用获取数据并将其推送到mobx可观察对象数组中时,可能会遇到一些问题。以下是一些可能的解决方案和建议:

  1. 确保你已经正确地配置了mobx和mobx-react,并且已经正确地创建了mobx可观察对象数组。你可以使用mobx的observable和observable.array方法来创建可观察对象和可观察数组。
  2. 确保你的fetch调用返回的数据是一个数组。如果不是数组,你可能需要对返回的数据进行处理,以确保它是一个数组。
  3. 确保你在fetch调用的.then方法中正确地处理返回的数据。你可以使用mobx的runInAction方法来确保在mobx动作中更新可观察对象数组。
  4. 确保你在组件中正确地使用mobx的@observer装饰器或使用observer函数来观察可观察对象数组的变化。这将确保组件在可观察对象数组发生变化时重新渲染。
  5. 如果你的数据更新不是在组件中发生的,而是在其他地方,你可以考虑使用mobx的autorun函数来观察可观察对象数组的变化,并在数据更新时执行相应的操作。
  6. 如果你的问题仍然存在,你可以尝试使用mobx-react-lite库,它是mobx-react的轻量级版本,可能会更容易集成和使用。

总结: 无法将数据从fetch调用推送到mobx可观察对象数组中可能是由于配置问题、数据处理问题、动作更新问题、观察器使用问题等引起的。通过仔细检查和尝试上述解决方案,你应该能够解决这个问题并成功将数据推送到mobx可观察对象数组中。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

用故事解读 MobX 源码(一)autorun

2 }) 我们调用 mobx.observable 的时候,就创建了 Observable 对象对象的所有属性都将被拷贝至一个克隆对象并将克隆对象转变成可观察的。...第二条语句整体上看就这样了。 接下来就让我们来详细分析探长的 runReaction 的方法,在该方法 探长联动观察员、数据情报室一起在部署方案中发挥监督、自动化响应功能。...MobX 的事务概念 MobX 暴露了 transaction 这一底层 API 供用户调用,让用户能够实现一些较为高级的应用,具体参考 官方文档 - Transaction(事务) 章节获取更多信息...这好比探长在数据情报室中注册为 正在执勤人员,后续观察员 O1 会向数据情报室索取 正在执勤人员 人,然后将自身信息输送给他 —— 结果上看,就相当于 观察员 O1 直接和 探长 R1 汇报;(之所以要经由数据情报室...数组,是陈旧的关联),则调用 removeObserver 去除该关联;因此这次遍历之后会删除 observing 数组 D 对象 让 observing 数组剩余对象的 diffValue 值变成

46120

用故事解读 MobX 源码(一)autorun

2 }) 我们调用 mobx.observable 的时候,就创建了 Observable 对象对象的所有属性都将被拷贝至一个克隆对象并将克隆对象转变成可观察的。...第二条语句整体上看就这样了。 接下来就让我们来详细分析探长的 runReaction 的方法,在该方法 探长联动观察员、数据情报室一起在部署方案中发挥监督、自动化响应功能。...MobX 的事务概念 MobX 暴露了 transaction 这一底层 API 供用户调用,让用户能够实现一些较为高级的应用,具体参考 官方文档 - Transaction(事务) 章节获取更多信息...这好比探长在数据情报室中注册为 正在执勤人员,后续观察员 O1 会向数据情报室索取 正在执勤人员 人,然后将自身信息输送给他 —— 结果上看,就相当于 观察员 O1 直接和 探长 R1 汇报;(之所以要经由数据情报室...数组,是陈旧的关联),则调用 removeObserver 去除该关联;因此这次遍历之后会删除 observing 数组 D 对象 让 observing 数组剩余对象的 diffValue 值变成

1K10
  • MobX管理状态(ES5实例描述)-2.可观察的类型

    MobX是一个简单有效的状态管理库,以派生(derive)的概念为核心,以观察者模式为手段,达到了修改数据自动更新界面等目的 正因为其本身提供了包装react的方法,可以简洁的改善react组件,所以官网文档和几乎所有教程都以...() ,其所有属性都会成为可观察的,并被拷贝到一个副本(对副本的更改也同时影响原始对象的值) 默认是递归处理的,如果一个属性是对象数组,其元素也会被观察 var $ctn = document.querySelector...和对象类似的是,向observable()传递一个数组参数,数组的每一项也会变为可观察的,且默认为递归处理的深度观察对象类似,数组也有一个浅观察的方法 observable.shallowArray...2.4 基本类型值和引用 所有JS的基本值都是不可变的,因此单个变量无法观察 MobX这些类型转换成可观察的“boxed value” 转换后的对象调用如下方法: get() - 取得当前值 set...{b: 22} */ 2.5 类实例 对于类实例,需要在构造函数或对实例对象调用mobx.extendObservable(targetName, ...props)方法: var Person =

    70130

    MobX 背后的基础原理

    基于这个原因,MobX 有一些不完善之处,比如不完全支持 扩展对象的动态属性(Expando properties) 并且使用了 类数组元素(faux-arrays)。...当应用状态的所有数据都在控制的时候,自动可观察性是非常方便的,MobX 也是基于此开始开发的。但有时你会发现世界不如你期望的那么理想。...但是,外部库管理的对象(如 JSX 或 DOM 元素)自动转换为可观察对象经常是不符合期望的,这很容易内部假设引入外部库。...可以轻易的在 MobX 问题追踪器找出一些无意间将对象转为可观察对象引起的非预期行为的问题。...在 MobX 不通知观察者就无法升级数据,也会引入在应用存在过期数据的可能性,这就违背了 MobX 的理念。人们有时希望有这种机制,但我还没遇到过概念上无法解决的实际用例。

    1.6K10

    MobX学习之旅

    一、MobX MobX其实是一个比较轻便的扩展的状态管理工具,是一个由Facebook以及一些其他团队的人共同维护的开源项目。...Observable 是被观察着和观察者的概念,你也可以理解为生产者和消费者的概念 @observable/Observable 方法将对象的所有属性重新克隆成新对象,并将克隆对象转变成可观察的。...有所不同,这里的被观察数组对象的这两个方法,是不会改变数组本身,而是一个拷贝的数组; 3、Es6的Map:创建一个动态建的observable映射,可以对特定项的更改做出反应等;会返回一个新的Observable...包单独提供的 Observer是用来React组建转变成响应式的组件,内部通过mobx.autorun包装了组件的 render函数,来确保store的数据更新时来刷新组件 @observer 是... inject 引入数据的方式,@inject(stores); 使得数据被自动保存在组件的this.props componentWillReact mobx-react新增的生命周期钩子

    1.4K20

    MobX管理状态(ES5实例描述)-4.常用工具方法

    MobX是一个简单有效的状态管理库,以派生(derive)的概念为核心,以观察者模式为手段,达到了修改数据自动更新界面等目的 正因为其本身提供了包装react的方法,可以简洁的改善react组件,所以官网文档和几乎所有教程都以...,或代价较大的操作 如果指定了scope参数,则fn会被绑定到scope上 4.2 Atom 符合Atom类规则的实例,可以在数据变化时通知MobX,或者接受MobX对象是否被观察的通知以做出响应 class...交互的Atom实例 "Clock", //调试用的名字 () => this.startTicking(), //可选,变为可观察时被调用...() => this.stopTicking() //可选,变为不可观察调用 ); } getTime() { if (this.atom.reportObserved...4.6 toJS 用法: toJS(value, supportCycles = true) 递归的将可观察对象转换成原生js结构 支持的可观察对象包括:数组对象、map和基本类型 派生值和其他不可枚举的属性不会包含在结果

    1K50

    MobX 和 React 十分钟快速入门

    但这带来了新的问题:数据需要规范化,无法保证引用的完整性,使用原型之类的强大概念几乎是不可能的。 MobX 通过解决根本问题重新简化了 State 管理工作:我们根本无法创建不稳定的 State。...MobX 将会 store 的 state 自动地派生并更新用户界面相关的部分。...使用引用 到目前为止,我们已经创建了 observable 对象(包括原型和普通对象),数组和原语。你可能会惊讶,MobX 是如何操作这些引用的?是我们的 state 可以被用于创建一个图表吗?...如果你点击第二个按钮,预览的组件依赖树将会显示出来,你可以在任何时候准确地检测出它正在观察的是哪一段数据。 结论 就这么多!没有样板。只有一些简单的声明式组件用来形成我们整体的 UI。...使用 mobx-react 包的 @observer 装饰器将你的 React 组件变得真正的响应。他们将会自动并有效地更新。即使是在用够大量数据的大型复杂项目中。

    1.2K30

    用故事解读 MobX 源码(二)computed

    温馨提示:因微信中外链都无法点击,请通过文末的” “阅读原文” 到技术博客完整查阅版;(本文整理自技术博客) 初衷:以系列故事的方式展现源码逻辑,尽可能以易懂的方式讲解 MobX 源码; 本系列文章...这两个问题: 哪儿来:观察员那儿获取,也可以其他会计师那儿获取; 到哪儿去:所生产的数据,要么是被探长消费,要么被其他会计师所用;(当然,没有人消费他所生产的数据也是可能的,不过这就得追究 MobX...O1、O2; 探长 R1 任务中所需的“张三的账户存款” 数值观察员 O2 那儿获取;所需的 “张三的存贷比” 数值会计师 C1 那儿获取; 同时架设数据情报室,方便信息交换; 2.1、部署细节...和探长一样,会计师执行计算任务完毕之后调用 bindDependencies 绑定 观察员 O1 和 观察员 O2 ;而在执行计算之后,会计师会调用 propagateChangeConfirmed...探长的这个 onBecomeStale 方法在上一篇文章的 “3、响应观察值的变化 - propagateChanged” 我们讲过,探长请求 MobX 请求重新执行一遍 A 计划方案。

    48521

    用故事解读 MobX源码(五) Observable

    对象;shallowBox 是 box 函数的非 deep 版本;该部分对应上述故事观察局办公室文员 的角色; 第三部分:针对 object、array 以及 map 这三种数据类型分别提供转换函数...== -1) interceptors.splice(idx, 1); }); } 整体的逻辑比较清晰,就是传入的 handler(拦截器)添加到 interceptors 数组属性。...回过头来 disposer 解绑函数,调用一次就会 interceptors 数组移除当前拦截器。使用 once 函数后,你无论调用多少次 disposer 方法,最终都只会解绑一次。...从这里你能大概体会到 MobX 体系递归现象: new ObservableValue 里面会调用 observable.object 方法,后面的讲解里你将会看到 observable.object...常见的 object 科室是 plan object 类型数据转换成可观察值,map 科室是 map 类型数据转换成可观察值….

    83320

    用故事解读 MobX源码(四) 装饰器 和 Enhancer

    因为在 MobX 是使用装饰器设计模式实现观察值的,所以说要先掌握装饰器,才能进一步去理解观察值。 所以这是一篇 “插队” 的文章,用于去理解 MobX 的装饰器和 Enhancer 概念。...Enhancer 字面上理解是 增强器,其作用就是给原有的对象 增加额外的功能 —— 这不就是装饰器的作用么?没错,它是辅助 MobX 的 @observable 装饰器功能的。...另一个角度来讲,在 mobx 代码实现,Enhancer 是实现 Observable 观察值必不可少的一部分,没有它就实现不了观察值功能,也就构建不起 MobX 体系了;而如果缺失 @observable...中有 4 种 Enhancer,在 types/modifier.ts 中有定义: deepEnhancer:默认的,也是最常用的,它会递归地在可观察对象的属性或可观察数组、Map 的元素上调用;...某种意义上已经成规范了) 先从对象获取属性成员(或方法成员)的原始 属性描述符 属性描述符传给装饰器方法,获取更改后的 属性描述符 通过 Object.defineProperty 更改后的属性描述符

    90920

    2023再谈前端状态管理

    Class 时代 Redux Redux 的灵感来源于 Flux 架构和函数式编程原理,状态更新预测、跟踪,提倡使用「单一存储」。这通常会「导致所有的东西存储在一个大的单体存储」。...每个 action 都会调用所有 reducer; reducer 要返回新的对象,如果更新的值层级较深,更新成本也很高; 更多的内存占用,由于采用单一数据源,所有状态存储在一个 state ,当某些状态不再需要使用时...代数效应,剥离组件的副作用,让开发者更专注业务逻辑。 代数效应是函数式编程的一个概念,用于副作用函数调用中分离。...; 无需修改对应的组件,就能将派生数据在同步与异步间切换; 我们能将导航视为头等概念,甚至可以状态的转变编码进链接; 可以很轻松地以回溯的方式持久化整个应用的状态,持久化的状态不会因为应用的改变而丢失...Mobx的优势是写法简单和高性能,但状态的可维护性不如redux,在并发模式的兼容性也有待观察

    90810

    mobx 入门

    mobx 响应式状态管理库 安装 // npm npm i --save mobx // yarn yarn add mobx 基础概念 所谓的响应式,既是原有数据结构,例如 数组对象等转变为可观察对象..., 通过对可观察对象的监控,当数据变化做出对应的动作,所以可以大概归纳为: 构建观察对象 设置响应动作 在mobx构建观察对象存在两种模式 函数模式 装饰器模式(针对类定义) 函数模式 创建观察对象...([ ["name", "Rogan"] ])) /* 注意: 我们实际操作的是观察对象,而非我们创建时传入的值, 我们可能修改保存观察对象的变量,这是丢失观察对象...例如: let arr = observable([1) arr = [2] */ 响应变化 autorun 当函数内的观察对象属性值变化时,触发该函数.../refguide/computed-decorator.html) 有时我们需要观察对象处理后的数据, 当观察对象值变化后,产生新的值 响应规则与 autorun 类似, 只对函数内的值作响应 computed

    1K20

    MobX状态管理:简洁而强大的状态机

    MobX 是一个用于构建响应的数据模型的库,它提供了一种声明式的方式来管理状态,使得数据的变化能够自动更新相关的视图。...创建可观察状态(Observable State)MobX使用@observable装饰器来创建可观察对象数组或基本类型,当它们发生变化时,依赖它们的观察者会自动更新。...的核心在于其反应式系统,当数据变化时,所有依赖它的计算值和观察者都会自动更新,无需手动调用setState。...代理(Proxies)MobX使用ES6的Proxy对象来创建可观察对象的代理。Proxy可以拦截对象的访问和修改操作,这使得MobX能够监听到何时读取或修改可观察状态。...类型注解(Type Annotations)在TypeScript,你可以为可观察对象、计算值和动作添加类型注解,确保类型安全。

    16910

    🚀🚀🚀初识mobx,以及mobx-react使用

    Mobx5之前,响应式原理是基于Object.defineProperty的,可以向下兼容到ES5浏览器,而Mobx5开始使用proxy特性支持响应式,最低支持ES6浏览器。...相较于Redux,Mobx只强调下面三个概念State(状态)Actions(动作)Derivations(派生)一句话概括:在任何事件调用action,修改state,如果这个state是响应式的,...定义一个响应式的Store有很多种方法,在不同的方法定义他们也有所不同。...具体的使用如下:autorun:当依赖属性值的变化执行一个指定的方法,自动收集依赖reaction:第一个方法的返回值作为第二个方法的参数,然后执行第二个方法when:当第一个方法的返回值为true时...this.condition, () => console.log("数据为空"))// 当when方法没有设置第二个参数时,会返回Promise对象when(() => !

    9710

    一文梭穿Vuex、Flux、Redux、Redux-saga、Dva、MobX

    也就是说,任何被发送到 store 的 action 现在都会经过thunk,promise,logger 这几个中间件了。...ReduxReact组件分为容器型组件和展示型组件,容器型组件一般通过connect函数生成,它订阅了全局状态的变化,通过mapStateToProps函数,可以对全局状态进行过滤,而展示型组件不直接...MobX 前面扯了这么多,其实还都是 Flux 体系的,都是单向数据流方案。接下来要说的 MobX,就和他们不太一样了。 我们先清空一下大脑,回到初心,什么是初心?就是我们最初要解决的问题是什么?...而 MobX 更接近于面向对象编程,它把 state 包装成可观察对象,这个对象会驱动各种改变。什么是可观察?就是 MobX 老大哥在看着 state 呢。...,可以充分利用时间回溯的特征,增强业务的预测性;MobX 没有那么自然的数据流动,也没有时间回溯的能力,但是 View 更新很精确,粒度控制很细。

    5.5K10

    React+Mobx写法更像Vue了

    observable可以用来观测一个数据,这个数据可以数字、字符串、数组对象等类型(相关知识点具体会在后文中详述),而当观测到的数据发生变化的时候,如果变化的值处在autorun,那么autorun...接下来说一个重点action只能影响正在运行的函数,而无法影响当前函数调用的异步操作 比如官网给了如下例子 @action createRandomContact() { this.pendingRequestCount...在end触发的回调函数,被action给包裹了,这就很好验证了上面加粗的那句话,action无法影响当前函数调用的异步操作,而这个回调毫无疑问是一个异步操作,所以必须再用一个action来包裹住它,这样程序才不会报错...,如果其中某个属性是对象或者数组,那么这个属性也将被observable进行观察,说白了就是递归调用。...考虑到ES5原生数组对象存在一定的限制,所以Mobx将会创建一个类数组对象来代替原始数组

    1.6K20

    状态管理的概念,都是纸老虎

    也就是说,任何被发送到 store 的 action 现在都会经过thunk,promise,logger 这几个中间件了。...ReduxReact组件分为容器型组件和展示型组件,容器型组件一般通过connect函数生成,它订阅了全局状态的变化,通过mapStateToProps函数,可以对全局状态进行过滤,而展示型组件不直接...MobX 前面扯了这么多,其实还都是 Flux 体系的,都是单向数据流方案。接下来要说的 MobX,就和他们不太一样了。 我们先清空一下大脑,回到初心,什么是初心?就是我们最初要解决的问题是什么?...而 MobX 更接近于面向对象编程,它把 state 包装成可观察对象,这个对象会驱动各种改变。什么是可观察?就是 MobX 老大哥在看着 state 呢。...,可以充分利用时间回溯的特征,增强业务的预测性;MobX 没有那么自然的数据流动,也没有时间回溯的能力,但是 View 更新很精确,粒度控制很细。

    5.3K20

    蚂蚁金服SOFARegistry之推拉模型

    1.1 模型和拉模型 在观察者模式,又分为模型和拉模型两种方式。  模型:主题对象观察者推送主题的详细信息,不管观察者是否需要,推送的信息通常是主题对象的全部或部分数据。...拉模型:主题对象在通知观察者的时候,只传递少量信息。如果观察者需要更具体的信息,由观察者主动到主题对象获取,相当于是观察主题对象数据。...具体两个模型详细剖析如下: 1.1.1 模型: 特点: 基于客户器/服务器机制、由服务器主动信息送到客户器的技术; “”的方式是指,Subject维护一份观察者的列表,每当有更新发生,Subject...推送模式不能保证能把信息送到客户器; 因为模式采用了广播机制,如果客户器正好联网并且和服务器在同一个频道上,推送模式才是有效的; push模式无法跟踪状态,采用了开环控制模式,没有用户反馈信息; 不管观察者是否需要...,用于数据缓存到JVM内存

    1.4K10
    领券