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