A jump react interfacial interface jump B interface, returns A interface, the interface state remains unchanged A

If all the single-page application, there will be a problem that I as the primary interface A, B jumps to a secondary interface when the interface back to A, you'll find all the parameters are reloaded

Many times if we have a lot of news in the interface list, selected the part of the news list by setting parameters, this time I click on the news heading into the details of the news, then returns

The A interface, we found that all the conditions are reset, so that the user experience is clearly very bad.

So I was a rookie for the kind of big brothers who say the method can be achieved using redux not quite understand, so I will introduce another method

In the jump to the B interface when the parameter data you want to keep ah, ah, transferred to the B interface, use localStorage to save the B interface inside, then returned when the A interface can be judged under localStorage it is not present, there is a direct use of the data for the parameters, otherwise according to the original come.

A interface

componentDidMount () { 
        backTop (); 
        the let localTemp = the JSON.parse (localStorage.getItem ( 'hotTemp' )); 

        IF (localTemp undefined || localTemp === === null ) {// here it is not judged from B back, if not, the initialization request 
            the let the params = { 
                Page: . 1 , 
                size: 20 is 
            } 
            the this .getHotEvent (the params); 
        } the else {// If back from B, then put conditions ah, ah data, directly to the display state on it
             the this .setState ({ 
                pageNum: localTemp.pageNum, 
                hotEvent: localTemp.hotEvent, 
                Success: localTemp.success,
                Total: localTemp.total 
            }) 
            IF (localTemp.sflag) {// here I was made a judge is not to fill the filter condition if the filter criteria back to fill in the A interface, these filter criteria to show up
                 this .setState ({ 
                    defaultInput: localTemp.defaultInput, 
                    the startTime: localTemp.startTime, 
                    endTime: localTemp.endTime, 

                }) 
                // this.getIeahotsSearch (localTemp.searchParam); 
            } the else {// here are no filters, as long as the data it displays 

                // this.getHotEvent (localTemp.params); 
            } 
        } 

    }



 {{<Link className = "left transition3 Recall" 
to =
     pathname: "/ B" , 
      state: {eventArray: Item, localState: the this .STATE}, // here is the data I want to keep, pass through state B 
}}
 > {item.title} </ Link>

B interface

  componentDidMount() {
     
       /*保存A界面列表的参数*/
        if(this.props.location.state.localState!==undefined&&this.props.location.state.localState!==null){
            localStorage.setItem("hotTemp", JSON.stringify(this.props.location.state.localState));
            //console.log(localStorage.getItem('hotTemp'));
        }

       
    }

that's it

Note: Be sure to clear this localStorage In other interface

Guess you like

Origin www.cnblogs.com/yesu/p/10973743.html