Comment maintenir l'état après une actualisation de page dans React.js?

Question

Disons que j'ai un code qui définit l'état d'une boîte de sélection choisie sur la page précédente:

this.setState({selectedOption: 5});

Existe-t-il un moyen d'avoir this.state.selectedOption rempli avec 5 après une actualisation de page?

Y a-t-il des rappels que je peux utiliser pour enregistrer cela dans localStorage et ensuite faire un grand setState ou y a-t-il un moyen standard de faire quelque chose comme ça?

Answer 1

Charger état à partir de localStorage s'il existe:

constructor(props) {
    super(props);           
    this.state = JSON.parse(localStorage.getItem('state'))
        ? JSON.parse(localStorage.getItem('state'))
        : initialState

passer outre this.setState pour enregistrer automatiquement état après chaque mise à jour:

const orginial = this.setState;     
this.setState = function() {
    let arguments0 = arguments[0];
    let arguments1 = () => (arguments[1], localStorage.setItem('state', JSON.stringify(this.state)));
    orginial.bind(this)(arguments0, arguments1);
};

Answer 2

Essayez de stocker la valeur dans le stockage local et au moment du chargement de la page, obtenez la valeur du stockage local. Si vous avez d'autres valeurs, vous devez utiliser redux pour le stockage des données.