关于记忆功能问题(保持相同的状态)

因为公司封装的组件返回直接用的是 history.goback()

所以这里选择采用localStorage来实现这样的功能。

	if (item.substring(0, 1) === '0') {
      localStorage.clear();
    } else {
      localStorage.setItem('markType', '1');
      localStorage.setItem('bmcxIndex', item.substring(0, 6));
      localStorage.setItem('indexLeft', index.toString());
    }

在更改的函数里添加缓存,当点击到第一个bar的时候清除所有缓存。

然后在useEffect()

	const markValue = localStorage.getItem('markType');
    if () {
      let temp: string[] = [];
      // 执行某些动作
      if (markValue !== null) {
        // 走localStorage
        const bmcxIndex = localStorage.getItem('bmcxIndex');
        const index = localStorage.getItem('indexLeft');
        if (bmcxIndex !== null && index !== null) {
         
        }
      } else {
    
      }

通过判断标记值是否存在来走不同逻辑,实现功能。

但localstorage有比较多的限制,比如大小受限,数据不安全等。于是想到用另一种方式

将状态数据放到Model里

在Model中写一个存放数据的函数。

reducers: {
    saveData(state, {payload}: any) {
      return {
        ...state,
        ...payload,
      };
    },
  },

然后在index.tsx中翻页后对状态进行处理。

  if (dispatch) {
        const bscxData = { 'key': anchorName, 'pageMemory': type };
        dispatch({
          type: 'bs/saveData',
          payload: { bscxData },
        });
      }

最后在页面初始化的地方读取这两个值,进行设置。

const { key, pageMemory } = props.bs.bscxData;
posted @ 2021-10-22 15:27  DawnHouse  阅读(53)  评论(0)    收藏  举报