So behalten Sie angewendete Filter auf der Browser-Schaltfläche zurück in der Antwort js

Question

In meiner Anwendung gibt es Filter auf allen Listenseiten. Jetzt, wie pro Anforderung, möchte ich angewandte Filter auf Browser-Schaltfläche zurück erhalten. Zum Beispiel hat der Benutzer Filter auf der Verkaufslistenseite angewendet. Danach klickt er auf einen Datensatz, um zur Verkaufsseite zu gelangen. Wenn der Benutzer nun auf die Schaltfläche Zurück des Browsers klickt, sollten die angewendeten Filter beibehalten werden. Um dies zu erreichen, habe ich unten gefallen. Auf Verkaufsliste Seite

componentWillMount() { 
    const { list, checkReportClose, 
    updateReportCloseStatus } = this.props; 
    const { inPopState } = this.state; 
    window.onpopstate =() => { 
    if (!_.isEmpty(list)) { 
    this.setState({ filters: JSON.parse(list.input.filters), 
     inPopState: true}, this.loadList); 
    } 
    } 
    if(!inPopState && inPopState != undefined && 
    checkReportClose == false) { 
    this.loadList(); 
    } 
    } 

obigen Code verwenden es funktioniert gut, aber vor einiger Zeit Taste ruft er die lis Seite api (this.loadList) twise.

Bitte schlagen Sie eine neue Lösung oder Modifikation in bestehenden vor.

Danke.

Answer 1

Ich würde vorschlagen, die URL zu verwenden, um Filter als Parameter zu speichern.

Ich habe ein Beispiel unten geschrieben. Lassen Sie uns http://skylerfenn.com/news?order=asc&category=feature&year=2017 als die URL für die folgenden Funktionen verwenden.

Schritt 1: Rufen Sie getParameters() im window.onpopstate auf und speichern Sie die Parameter im Status. Unter Verwendung der obigen URL gibt getParameters() die Parameter als Objekt { order: 'asc', category: 'feature', year: '2017' } zurück.

function getParameters() { 
    let parameters = window.location.search.replace('?', ''); 

    let currentParameters = {}; 

    if (Object.keys(parameters).length) { 

    parameters = parameters.split('&'); 

    for (let i = 0; i < parameters.length; i++) { 
     let parameter = parameters[i].split('='); 
     currentParameters[parameter[0]] = parameter[1]; 
    } 

    } 

    return currentParameters; 
} 

Schritt 2: Übergeben keine neuen Parameter an die getNewParameters Funktion unten als Objekt. Wenn Sie beispielsweise getNewParameters({ order: 'desc', year: null }) aufrufen, wird das Objekt { order: 'desc', category: 'feature' } zurückgegeben. Beachten Sie, dass das Jahr gelöscht wird, da es null ist.

function getNewParameters(newParameters) { 
    const parameters = getParameters(); 

    const keys = Object.keys(newParameters); 

    for (let i = 0; i < keys.length; i++) { 
    const value = newParameters[keys[i]]; 

    parameters[keys[i]] = value; 

    if (!value) { 
     delete parameters[keys[i]]; 
    } 
    } 

    return parameters; 
} 

Schritt 3: Verwenden Sie das Ergebnis aus getNewParameters Zustand zu aktualisieren. Übergeben Sie auch das unten stehende Ergebnis, um Ihre URL zu aktualisieren.