2021-06-01 react redux-mobx 数据无变化

项目场景：

react antd-Tabs mobx
更改标签页内数据
需求:只对当前需要的指定页面进行刷新，而不会在点击切换其他页面时不进行刷新

---

问题描述：

redux或mobx等，仓库内值发生更改，但标签页页面无变化

---

原因分析：

mobx无加入observer ：
缓存机制导致仓库值更改，标签页页面数据无变化

---

解决方案：

1.设置状态值，在标签页页面外部触发按钮，更改状态值将页面进行强制刷新（无法进行强制刷新,原因是有缓存无法识别状态值，从而进行刷新）
2.对antd-Tabs组件进行强制刷新：

// An highlighted block
 <Tabs
        type="editable-card"
        onChange={this.onChange}
        activeKey={activeKey}
        onEdit={this.onEdit}
      >
        {panes.map(pane => (
          <TabPane tab={pane.title} key={pane.key} closable={pane.closable}>
          //切换选中的标签页的key值activeKey ，相等于 渲染到这个页面（pane.content）的key值
            {activeKey === pane.key && pane.content}
          </TabPane>
        ))}
 </Tabs>

可以进行强制刷新,但这样就失去的标签页的本质意义（使用标签页就是为了在切换页面时，利用他的缓存机制）
需求:只对当前需要的指定页面进行刷新，而不会在点击切换其他页面时不进行刷新
3.mobx 值不改变其实是没有添加（observable）：

// mobx 仓库的值
class AppStore {
	@observable
	data={
	}
	}

// 添加observer 
import { observer } from 'mobx-react';
............
export default observer(组件名);

observer 函数/装饰器可以用来将 React 组件转变成响应式组件。 它用 mobx.autorun 包装了组件的 render 函数以确保任何组件渲染中使用的数据变化时都可以强制刷新组件。observer 是由单独的 mobx-react 包提供的。

小贴士: 当 observer 需要组合其它装饰器或高阶组件时，请确保 observer 是最深处(第一个应用)的装饰器，否则它可能什么都不做。

纠错
注意，使用 @observer 装饰器是可选的，它和 observer(class Timer … { })或observer(组件名) 达到的效果是一样的。
observer 详解

额外（按钮触发刷新）：

// mobx 仓库的值
class AppStore {
	@observable
	data={
	}
	}

// 更改仓库值
store.setRefresh({
          name: '<NewForm/>', //设置当前标签页key为 '<NewForm/>',
          bool: true
        })

// An highlighted block
 setRefresh = () => {
    store.setRefresh({
      name: store.refresh.name,
      bool: false
    })
    console.log(store.refresh);
    setTimeout(() => {
      store.setRefresh({
        name: store.refresh.name,
        bool: true
      })
      console.log(store.refresh);
    }, 200);
  }