WdBly Blog

懂事、有趣、保持理智

周维的个人Blog

懂事、有趣、保持理智

站点概览

周维 | Jim

603927378@qq.com

推荐阅读

Mobx数据更新但组件不渲染(不重新render)问题

在Mobx + React Native项目实践中,遇到了Mobx失效问题,当我在action方法中更新了@observable监听的数据, 但是在inject此Store的组件中并没有直接触发render

Mobx失效

首先在rootStore中,我定义了系统的币种和修改币种的方法setCurType

class RootStore { @observable currType = "USD" @action setCurType = currType => { this.currType = currType; } } export default new RootStore();

然后在产品组件中注入MobxStore

@inject("RootStore") @inject("ProductStore") @observer class ProductDetail extends React.Component { render(){ ... } }

最后通过调用RootStore的setCurType方法修改币种,Mobx中数据发生了变化,但是组件没有更新

/** * 切换币种 */ _switchCurType = () => { this.props.RootStore.setCurType("CNY"); }

Mobx失效解决方案

经过一系列测试和查阅资料发现,Mobx只会更新在render用到过监听属性的组件,换句话说,我们的产品组件里必须要使用到RootStore.currType,当currType改变时,产品组件才会主动重新渲染

解决: 在产品组件中接收要更新的Store属性

@inject("RootStore") @inject("ProductStore") @observer class ProductDetail extends React.Component { render(){ let {currType} = this.props.RootStore; ... } }
提交

全部评论0

暂时没有评论...