Jak odzyskać stan na przycisku Wstecz, reagując

Question

Jeśli mam prosty komponent reagujący, który rejestruje liczbę kliknięć dla przycisku i po każdym kliknięciu rejestruje nowy stan historii bez zmiany adresu URL. Kiedy użytkownik kliknie, jak przywrócić stan do stanu, w jakim był?

Mogę to zrobić, jak to jest tutaj, używając natywnego obiektu historii JavaScript, ale nie powiedzie się, gdy użytkownik przejdzie z powrotem do pierwszego stanu iz powrotem z innego komponentu do ostatniego stanu tego.

Podejrzewam, że lepiej jest to zrobić za pomocą routera reagowania (1.0)?

import React, { Component } from 'react'; 

export default class Foo extends Component { 
    state = { 
    clickCount: 0, 
    }; 

    componentWillMount() { 
    window.onpopstate = (event) => { 
     if (event.state.clickCount) { 
     this.setState({ clickCount: event.state.clickCount }); 
     } 
    }; 
    } 

    onClick() { 
    const newClickCount = this.state.clickCount + 1; 
    const newState = { clickCount: newClickCount }; 
    this.setState(newState); 
    history.pushState(newState, ''); 
    } 

    render() { 

    return (
     <div> 
     <button onClick={this.onClick.bind(this)}>Click me</button> 
     <div>Clicked {this.state.clickCount} times</div> 
     </div> 
    ); 
    } 
} 

Answer 1

localStorage lub nawet ciasteczka są opcje, nie ale chyba najlepszy sposób. Powinieneś przechowywać licznik w bazie danych, w ten sposób możesz ustawić początkowy stan w swoim konstruktorze na ostatnią wartość zapisaną w bazie danych.

Inną opcją, jeśli musisz tylko utrzymywać licznik po stronie klienta (a nie w bazie danych), jest zamknięcie.

// 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; 

Twój kod zmieni się poniżej.

import React, { Component } from 'react'; 
import CountStore from './CountStore'; 

export default class Foo extends Component { 
    state = { 
    clickCount: CountStore.getCount() 
    }; 

    componentWillMount() { 
    window.onpopstate = (event) => { 
     if (event.state.clickCount) { 
     this.setState({ clickCount: event.state.clickCount }); 
     } 
    }; 
    } 

    onClick() { 
    const newClickCount = CountStore.incrementCount(); 
    const newState = { clickCount: newClickCount }; 
    this.setState(newState); 
    } 

    render() { 

    return (
     <div> 
     <button onClick={this.onClick.bind(this)}>Click me</button> 
     <div>Clicked {this.state.clickCount} times</div> 
     </div> 
    ); 
    } 
} 

Może istnieć czystszy sposób korzystania z routera reagowania, ale jest to jedna z opcji.