Wie Status wiederherstellen auf Zurück-Schaltfläche mit reagieren

Question

Wenn ich eine einfache Reaktionskomponente habe, die eine Klickanzahl für eine Schaltfläche aufzeichnet und bei jedem Klick einen neuen Verlaufsstatus aufzeichnet, ohne die URL zu ändern. Wenn der Benutzer zurückklickt, wie stelle ich den Zustand so wieder her, wie er war?

Ich kann tun, wie es hier ist, mit dem nativen JavaScript-Verlaufsobjekt, aber es schlägt fehl, wenn der Benutzer zurück in den ersten Zustand und zurück von einer anderen Komponente in den letzten Zustand von diesem.

Ich vermute, dass es besser ist, dies mit react-router (1.0) zu tun?

Answer 1

localStorage oder sogar Cookies sind Optionen, aber wahrscheinlich nicht der beste Weg. Sie sollten die Anzahl in einer Datenbank speichern. Auf diese Weise können Sie den Anfangszustand in Ihrem Konstruktor auf den letzten in der Datenbank gespeicherten Wert festlegen.

Eine andere Option, wenn Sie die Zählung auf der Clientseite (und nicht in einer Datenbank) nur beibehalten müssen, ist eine Schließung.

// CountStore.js 
var CountStore = (function() { 
    var count = 0; 

    var incrementCount = function() { 
    count += 1; 
    return count; 
    }; 

    var getCount = function() { 
    return count; 
    }; 

    return { 
    incrementCount: incrementCount, 
    getCount: getCount 
    } 

})(); 

export default CountStore; 

Ihr Code würde sich ändern, um das unten zu sein.

Es kann einen saubereren Weg mit react-Router geben, aber dies ist eine Option.