react页面跳转携带参数,返回时能展示跳转之前的数据

需求:带有筛选功能的列表跳转到详情页之后,刷新详情页也能正常显示数据,且返回到列表页后,能记住之前筛选出来的数据并展示。

列表页核心代码

  • 页面跳转能携带参数的核心代码为seeDetailFunc函数
  • 详情返回到列表,能记住之前筛选出来的数据的核心代码为let localTemp = JSON.parse(localStorage.getItem('storeList'));
class PromotersAgent extends PureComponent {
    constructor(props) {
        super(props);
        this.state = {
          inputUserId:"",        
        };
      }

      componentDidMount() {
        const token = localStorage.getItem("token");
        const name = localStorage.getItem("username");
        this.setState({
          token: token,
          name: name,
        });
        let localTemp = JSON.parse(localStorage.getItem('storeList'));
        if (localTemp) {// 有缓存
          this.setState({
            pageNum: localTemp.pageNum,
            searchKeyword: localTemp.searchKeyword, // 店铺名称
          },()=>{
            var jsonParams = {
              token: token,
              userName: name,
              pageNum: this.state.pageNum,
              storeName: this.state.searchKeyword, // 店铺名称
            };
            axios.post(getStoreList, stringify(jsonParams)).then(({ data }) => {
              if (data.status === 200) {
                this.setState({
                  Datas: data.data.result_list,
                  totalData: data.data.totalData,
                });
              } else if (data.status === 400) {
                alert(data.msg);
                this.props.history.push("/login");
              }
            });
          })
    
        }else{// 没有缓存
          var jsonParams = {
            token: token,
            userName: name,
            pageNum: this.state.pageNum,
            storeName: this.state.searchKeyword, // 店铺名称
          };
         
          axios.post(getStoreList, stringify(jsonParams)).then(({ data }) => {
            if (data.status === 200) {
              this.setState({
                Datas: data.data.result_list,
                totalData: data.data.totalData,
              });
            } else if (data.status === 400) {
              alert(data.msg);
              this.props.history.push("/login");
            }
          });
        }
      }



    render() {
        const tba = this.state.Dates.map((item, index) => {
            var list = [];

            const tabs = {
            key: index,
            id:item.id,
    
            operation:
  • this.seeDetailFunc(item.orderNo,item)}>
  • , }; return tabs; }); return (
    ); } seeDetailFunc(param,item) { this.props.history.push({ pathname: '/zeroOrderDes', search:'orderNo=' + param+'', state: {eventArray: item, localState: this.state,orderNo:item.orderNo} }) } } export default PromotersAgent;
    image.png

    详情页部分代码

    • 详情页接收参数的核心代码var path = this.props.location.search;this.props.location.state.storeId
    • 详情也缓存列表页面的筛选条件数据的核心代码
      localStorage.setItem("storeList", JSON.stringify(this.props.location.state.localState));
     var path = this.props.location.search;
        var storeId = '';
       if (this.props.location.state) {
        storeId = this.props.location.state.storeId;
            console.log('AAA---',storeId);
            /*保存A界面列表的参数*/
            if(this.props.location.state.localState!==undefined&&this.props.location.state.localState!==null){
              localStorage.setItem("storeList", JSON.stringify(this.props.location.state.localState));
            }
        }else{
          console.log('BBB');
                // var path = this.props.location.search; //获取默认店铺id
                storeId = path.substring(path.lastIndexOf("=") + 1);
        }
    
    image.png

    请移步到我的这篇文章React 跳转页面传参的做法(Link与push)与差别,列举了更多跳转页面传参的做法。

    你可能感兴趣的:(react页面跳转携带参数,返回时能展示跳转之前的数据)