第一次接触react碰到一个需求:在条件查询后,点击列表详情会跳到详情页面,在这里就会出现问题,返回的时候当时的查询条件就会回归到初始状态,又要重新录入查询条件,要求返回查询页面的时候,上次的查询结果不变。
碰到这个需求,第一件事就是在网上找有没有现成的插件可以解决这个问题,还真找到了类似的。 如 react-keep-alive,结果发现与现有的框架匹配不上。要用只能改现有的框架(以目前所掌握的react知识显然做不到这点,时间又紧)。 然后就想到了下策,自己写。
主要:用浏览器sessionStorage缓存查询条件解决
具体实现思路:
1、state 增加缓存查询条件的对象 sessionQuery: {···}和查询条件 属性 保持一致
2、点击查询时 把查询条件属性值 存入 sessionQuery对象
3、点击跳入其他页面,触发写好的方法,该方法作用是把 sessionQuery存入浏览器sessionStorage
4、历史回头 或返回查询页面时,从sessionStorage把sessionQuery 值取出来,根据根据查询条件重新查询,并赋值给 state,清除缓存;
代码实现:(与实现思路一一对应)
1、增加缓存查询条件的对象
state = { ··· sessionQuery: { ··· }, };
2、查询条件属性值 存入 sessionQuery
query = (params) => {
···
//存入sessionQuery
this.state.sessionQuery.···
this.state.sessionQuery.···
this.state.sessionQuery.··· ···
3、 查看详情
handelDetail = (val, row) => {
···
this.saveQuerySession();
dispatch(
routerRedux.push(`···`));
};
saveQuerySession = params =>{ setSession('employeeList-query',JSON.stringify(this.state.sessionQuery));
};
4、
//类似html里面的reload 进入页面重新加载 ,在这里是重新渲染页面
componentDidMount() {
···
const eqstr = getSession('employeeList-query');
if(eqstr != "" && eqstr != null && eqstr!= '{page:1,businessType:"选择业务类型",keyWord:"",hrKeyWord:"",filingStatus:""}'){
//回退后走的代码块 const eq = JSON.parse(eqstr); let teq={}; teq.···=eq.···;
query(teq);
//sessionQuery 赋值给state ,为什么要重新赋值给state呢,因为如果直接点查询 那看似缓存好的查询条件就瞬间清空了,在这里踩了好久的坑才发现。毕竟做为一个初学react的小白踩坑不可避免
this.setState({
···
sessionQuery: {
···
//sessionQuery重新赋值给自己,防止重新出发存入sessionStorage事件 sessionQuery没有值
},
});
//清除session缓存
this.clearQuerySession();
else{
//正常要走的代码块 不需要了解
}
}
clearQuerySession = params =>{ setSession('employeeList-query',""); };
setSession这个方法就不在这里写了,这个方案及实现经过本人轮番轰炸测试以及多次修改最终成型。欢迎点评
网友评论