美文网首页技术
react 历史回退 缓存查询结果解决方案

react 历史回退 缓存查询结果解决方案

作者: 笔名柳宿 | 来源:发表于2020-07-22 22:18 被阅读0次

    第一次接触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这个方法就不在这里写了,这个方案及实现经过本人轮番轰炸测试以及多次修改最终成型。欢迎点评

    相关文章

      网友评论

        本文标题:react 历史回退 缓存查询结果解决方案

        本文链接:https://www.haomeiwen.com/subject/pwhxlktx.html