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

在mobx中调用action时组件未重新呈现

,可能是由于以下原因导致的:

  1. MobX的观察机制:MobX使用观察机制来检测状态的变化并触发组件的重新渲染。如果在调用action时,没有修改被观察的状态,那么组件将不会重新呈现。确保在action中修改了被观察状态的值,以便触发重新渲染。
  2. 异步操作:如果在action中进行了异步操作,例如调用了一个异步API请求或者使用了setTimeout等异步函数,那么组件可能在异步操作完成之前不会重新呈现。在异步操作完成后,确保修改了被观察状态的值,以便触发重新渲染。
  3. 组件未正确观察状态:确保组件正确地观察了需要观察的状态。在组件中使用@observer装饰器或使用mobx-react提供的observer函数来确保组件正确地观察状态的变化。
  4. MobX配置问题:检查MobX的配置是否正确。确保已经正确地配置了mobx-react提供的Provider组件,并将根组件包裹在Provider中,以便MobX能够正常工作。

总结起来,要解决在mobx中调用action时组件未重新呈现的问题,需要确保在action中修改了被观察状态的值,并且组件正确地观察了这些状态的变化。如果仍然存在问题,可以进一步检查MobX的配置和异步操作是否正确。

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

相关·内容

  • MobXMobX 简单入门教程

    如果前一个计算中使用的数据没有更改,计算属性将不会重新运行。 如果某个其它计算属性或 reaction 使用该计算属性,也不会重新运行。 在这种情况下,它将被暂停。...可以理解成批量操作,即一次动作包含多次修改可观察状态,此时只会在动作结束后,做一次性重新计算和反应。 action 也有两种使用方法,这里以 decorate 方式来介绍。...它将 react 组件转化为对可观察数据的反应,也就是将组件的 render 方法包装成 autorun 方法,使得状态变化时能自动重新渲染。...首先安装 mobx-react 依赖: cnpm i mobx-react -D 修改webpack.config.js, presets 配置添加 react 进来: // ......@observer 需要根据数据变换,而改变UI的组件去引用,另外建议有使用到相关数据的类都引用。

    1.5K00

    前端react面试题指北

    super,调用super(props),否则只需要写super() Redux 和 Vuex 有什么区别,它们的共同思想 (1)Redux 和 Vuex区别 Vuex改进了ReduxAction和...,如果key不一样,则react先销毁该组件,然后重新创建该组件 简述react事件机制 当用户在为onClick添加函数,React并没有将Click时间绑定在DOM上面 而是document...)和动作(action) Derivation(衍生)∶ 从应用状态中派生而出,且没有任何其他影响的数据 对比总结: redux将数据保存在单一的storemobx将数据保存在分散的多个store...调用 setState 组件的 state 并不会立即改变, setState 只是把要修改的 state 放入一个队列, React 会优化真正的执行时机,并出于性能原因,会将 React 事件处理程序的多次...最终更新只产生一次组件及其子组件重新渲染,这对于大型应用程序的性能提升至关重要。

    2.5K30

    MobX学习之旅

    对比React-Redux component-->actionCreator(data)-->reducer-->component 这里的reducerMobX里都给了action,直接通过...return this.numbersArr.filter((item) => { return item * 2 > 50; }).join(' '); } 然后组件内进行调用...computed创建的函数,是有自己的观察者的,而autorun是只有它的依赖关系改变才会重新计算, 否则它的值被认为是不相干的。...函数,来确保store的数据更新来刷新组件 @observer 是observer(class ***{})的注解形式,用来观察组件, 高阶组件 @observer class Test extends...,当组件重新render的时候会被触发,但在初始渲染前是不会被触发的 onError mobx-react提供的错误钩子函数来收集错误 用法: import { onError } from 'mobx-react

    1.4K20

    【愚公系列】2022年11月 微信小程序-全局数据共享

    创建 MobX 的 Store 实例 3.页面中使用Store成员 4.组件中使用Store成员 ---- 前言 开发中经常会遇到组件共享数据的问题,各种前端框架中都会有对应的全局共享组件,全局数据共享是为了解决组件之间数据共享的问题...开发中常用的全局数据共享方案有:Vuex、Redux、MobX 等。 小程序,可使用 mobx-miniprogram 配合 mobx-miniprogram-bindings 实现全局数据共享。...其中: mobx-miniprogram 用来创建 Store 实例对象 mobx-miniprogram-bindings 用来把 Store 的共享数据或方法,绑定到组件或页面中使用 一、MobX...@1.2.1 注意:MobX 相关的包安装完毕之后,记得删除 miniprogram_npm 目录后,重新构建 npm。...而存在,这样我们就可以页面卸载利用​​storeBindings​​来清理挂载的Store实例 4.组件中使用Store成员 {{numA}}+{{numB}}={{sum}} <button type

    39530

    2021前端react面试题汇总

    switch,只需在对应的mutation函数里改变state值即可 Vuex由于Vue自动重新渲染的特性,无需订阅重新渲染函数,只要生成新的State即可 Vuex数据流的顺序是∶View调用store.commit...和变更前 state 状态进行比较,从而确定是否调用 this.setState()方法触发Connect及其子组件重新渲染 5....setState方法更新state,就会触发视图的重新渲染,完成表单组件的更新 受控组件缺陷: 表单元素的值都是由React组件进行管理,当有多个输入框,或者多个这种组件,如果想同时获取到全部的值就必须每个都要编写事件处理函数...(2)非受控组件 如果一个表单组件没有value props(单选和复选按钮对应的是checked props),就可以称为非受控组件非受控组件,可以使用一个ref来从DOM获得表单值。...当 ref 属性被用于一个自定义的类组件,ref 对象将接收该组件已挂载的实例作为他的 current。 当在父组件需要访问子组件的 ref 可使用传递 Refs 或回调 Refs。 9.

    2K20

    React性能测量和分析

    下一步操作就是找出组件重新渲染的元凶, 检测为什么组件进行了更新. 我们先假设我们的组件是一个’纯组件‘,也就是说我们认为只有组件依赖的状态变更组件才会重新渲染....Context 的 value 的变更会强制重新渲染组件 props 变动检测 在上一篇文章我就建议简化 props,简单组件的 props 的变更很容易预测, 甚至你肉眼都可以察觉出来。...,可以componentDidUpdate使用类似上面的方式来比较 props mobx 变动检测 排除了 props 变更导致的重新渲染,现在来看看是否是 mobx 响应式数据导致的变更....因为 Mobx 没有 Redux 那样固化的数据变更模式,Mobx 并不容易自动化地监测数据是如何被变更的。 mobx 我们使用@action 来标志状态的变更操作,但是它拿异步操作没办法。...对于 Mobx 首先建议开启严格模式, 要求所有数据变更都放在@action 或 flow : import { configure } from 'mobx'; configure({ enforceActions

    2.3K10

    mobx 入门

    , 通过对可观察对象的监控,当数据变化做出对应的动作,所以可以大概归纳为: 构建观察对象 设置响应动作 mobx构建观察对象存在两种模式 函数模式 装饰器模式(针对类定义) 函数模式 创建观察对象...Rogan.age = 110 // -> dead // 响应函数只会执行一次 Rogan.age = 0 Rogan.age = 110 // 无输出 when promise模式 当when 配置响应函数...与 异步函数 action 绑定异步函数,外层action 对异步内的回调无效的 class React 安装 mobx-react 依赖 // npm npm i --save mobx-react...//yarn yarn add mobx-react import { observable, autorun, computed, action, when, reaction } from '.../index.less" // @oberver 将组件内的 rander 函数, 通过 autorun做监听 export default @observer class Cmp extends React.Component

    1K20

    2021前端react面试题汇总

    switch,只需在对应的mutation函数里改变state值即可 Vuex由于Vue自动重新渲染的特性,无需订阅重新渲染函数,只要生成新的State即可 Vuex数据流的顺序是∶View调用store.commit...和变更前 state 状态进行比较,从而确定是否调用 this.setState()方法触发Connect及其子组件重新渲染 5....setState方法更新state,就会触发视图的重新渲染,完成表单组件的更新 受控组件缺陷: 表单元素的值都是由React组件进行管理,当有多个输入框,或者多个这种组件,如果想同时获取到全部的值就必须每个都要编写事件处理函数...(2)非受控组件 如果一个表单组件没有value props(单选和复选按钮对应的是checked props),就可以称为非受控组件非受控组件,可以使用一个ref来从DOM获得表单值。...当 ref 属性被用于一个自定义的类组件,ref 对象将接收该组件已挂载的实例作为他的 current。 当在父组件需要访问子组件的 ref 可使用传递 Refs 或回调 Refs。 9.

    2.3K00

    阿里前端二面常考react面试题(必备)_2023-02-28

    一旦有插入动作,会导致插入位置之后的列表全部重新渲染 这也是为什么渲染列表为什么要使用唯一的 key。...如果 render() 方法依赖于其他数据,则可以调用 forceUpdate() 强制让组件重新渲染。...主要解决的问题: 单纯的Redux只是一个状态机,是没有UI呈现的,react- redux作用是将Redux的状态机和React的UI呈现绑定在一起,当你dispatch action改变state的时候...它们是只读组件,必须保持纯,即不可变。它们总是整个应用从父组件传递到子组件。子组件永远不能将 prop 送回父组件。这有助于维护单向数据流,通常用于呈现动态生成的数据。...React-Router 4怎样路由变化时重新渲染同一个组件? 当路由变化时,即组件的props发生了变化,会调用componentWillReceiveProps等生命周期钩子。

    2.8K30

    42. 精读《前端数据流哲学》

    因此 mobx 后来给出了 action 解决方案,解决了与 react props 的冲突,但是没有解决副作用强制分离的问题。...对 action 中副作用行为,比如发请求,也提供了封装好的函数转化为数据源,因此,将 redux middleware 的副作用,转移到了数据源转换做成,让 action 保持纯函数,同时增强了原本就是纯函数的...redux 通过 action 做副作用,将副作用隔离 reducer 之外,使 reducer 成为了纯函数。 rxjs 将副作用先转化为数据源,将副作用隔离管道流处理之外。...笔者的想法比较激进,为了让插件拥有最大能力,这个 web designer 所有内核代码都是用插件写的,除了调用插件的部分。所以插件可以随意访问和修改内核任何数据,包括 UI。...前端发展总是进两步退一步,不要形成思维定式,每隔一段时间,需要重新审视下旧的技术。

    93120

    各流派 React 状态管理对比和原理实现

    前言 React 诞生之初,Facebook 宣传这是一个用于前端开发的界面库。大型应用,如何处理好 React 组件通信和状态管理就显得非常重要。...的 render 函数,当监听到 render 依赖属性变化的时候就会重新渲染组件,这样就可以做到高性能更新。... Redux ,实现了一个发布订阅,组件去监听 store 变化,一旦 store 变化,就会通知组件重新渲染。... Mobx ,将状态变成可观察数据,通过数据劫持,拦截其 get 来做依赖收集,知道每个组件依赖哪个状态。状态的 set 阶段,通知依赖的每个组件重新渲染,做到了精准更新。... Recoil ,通过 useRecoilValue/useRecoilState 两个 Hook API,组件第一次执行的时候,构建 Atom 和组件的依赖图,将组件 setState 存入到

    2.9K61

    2022前端社招React面试题 附答案

    switch,只需在对应的mutation函数里改变state值即可 Vuex由于Vue自动重新渲染的特性,无需订阅重新渲染函数,只要生成新的State即可 Vuex数据流的顺序是∶View调用store.commit...和变更前 state 状态进行比较,从而确定是否调用 this.setState()方法触发Connect及其子组件重新渲染 5....setState方法更新state,就会触发视图的重新渲染,完成表单组件的更新 受控组件缺陷: 表单元素的值都是由React组件进行管理,当有多个输入框,或者多个这种组件,如果想同时获取到全部的值就必须每个都要编写事件处理函数...(2)非受控组件 如果一个表单组件没有value props(单选和复选按钮对应的是checked props),就可以称为非受控组件非受控组件,可以使用一个ref来从DOM获得表单值。...当在父组件需要访问子组件的 ref 可使用传递 Refs 或回调 Refs。 9. React组件的构造函数有什么作用?它是必须的吗?

    1.7K40

    2022社招react面试题 附答案

    由于JavaScript异步事件的性质,当您启动API调⽤,浏览器会在此期间返回执⾏其他⼯作。当React渲染⼀个组件,它不会等待componentWillMount它完成任何事情。...; componentWillReceiveProps:初始化render的时候不会执行,它会在组件接受到新的状态(Props)被触发,一般用于父组件状态更新组件重新渲染 shouldComponentUpdate...6、受控组件和非受控组件区别是啥? 受控组件是React控制组件,并且是表单数据真实的唯一来源。 非受控组件是由DOM处理表单数据的地方,而不是 React 组件。...mobx更适合数据不复杂的应⽤:mobx难以调试,很多状态⽆法回溯,⾯对复杂度⾼的应⽤,往往⼒不从⼼。...当然mobx和redux也并不⼀定是⾮此即彼的关系,你也可以项⽬⽤redux作为全局状态管理,⽤mobx作为组件局部状态管理器来⽤。 10、redux异步中间件之间的优劣?

    2.1K10

    React+Mobx写法更像Vue了

    直到number重新变为1才输出true。 实际项目中,computed会被广泛使用到。...end触发的回调函数,被action给包裹了,这就很好验证了上面加粗的那句话,action无法影响当前函数调用的异步操作,而这个回调毫无疑问是一个异步操作,所以必须再用一个action来包裹住它,这样程序才不会报错...之后我们实例化一个对象,叫做newState,之后我的React组件,我只需要用@observer修饰一下组件类,便可以愉悦地使用这个newState对象的值和函数了。...然后把state和这个函数分别传到两个子组件里,逻辑简单,且子组件很少的时候可能还好,但当业务复杂起来后,这么写就非常繁琐,且难以维护。而用Mobx就可以很好地解决这个问题。...,Main和AllNum (均采用无状态函数的方式声明的组件) MyState存放了这些组件要用到的所有状态和函数。

    1.6K20

    2023再谈前端状态管理

    综上,系统中跟业务相关、会频繁变动的数据共享,应谨慎使用 context。...每个 action 都会调用所有 reducer; reducer 要返回新的对象,如果更新的值层级较深,更新成本也很高; 更多的内存占用,由于采用单一数据源,所有状态存储一个 state ,当某些状态不再需要使用时...Mobx会在组件挂载收集依赖,和state建立联系,这个方式在即将到来的react 18的并发模式(Concurrent Mode),可能无法平滑地迁移。...Mobx的学习成本更低,没有全家桶。 Mobx更新state深层嵌套属性更方便,直接赋值就好了,redux则需要更新所有途经层级的引用(当然搭配immer也不麻烦)。...基于ES6 proxy ,使用观察者/可观察模式的,当你修改一个值,任何使用该值的组件都会自动重新渲染。 原子化管理状态,进行精确渲染。

    90910
    领券