关于记忆功能问题(保持相同的状态)
因为公司封装的组件返回直接用的是 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;