Блог

Я пытаюсь сохранить состояние после обновления страницы в React:

Вот мой код:

 class App extends React.Component{
    constructor(props){
        super(props);
        this.state = JSON.parse(localStorage.getItem("app_state")) ? JSON.parse(localStorage.getItem("app_state")) : {
            account: {
                email: "",
                password: ""
            },
            token: "",
            authenticated: false
        };

    }


    componentDidUpdate(prevProps, prevState){
        if(this.state.token !== prevState.token){ //set a new state if token changes
            localStorage.setItem("app_state", this.state);
        }
    }
    
    
    
    
    logInStatus = () =>{

        if(!this.state.authenticated) {
            return (
                <form onSubmit={this.handleSubmit}>
                    
                    <label>Email Address</label>
                    <input type="text" value={this.state.passAccount.email} onChange={this.handleChange} name="email"/>                
                
                    <label>Password</label>
                    <input type="password" value={this.state.passAccount.password} onChange={this.handleChange} name="password" />
     
                    
                    <br/>                    
                    <Button type="submit" onClick={() => {
                        this.someFunction(String(this.state.passAccount.email));
                    }}>
                        Sign In</Button>
                </Form>
            );
        }else{
            return(<Redirect to="/some/endpoint" />);
        }
    }
    
    
    
}

export default App;
 

Вот что я делаю, чтобы предотвратить потерю состояния при обновлении страницы:

В методе componentDidUpdate я проверяю наличие токена, если он не найден/не совпадает с токеном состояния, я сохраняю его в локальном хранилище.

В состоянии в конструкторе я получаю состояние из localstorage.

Однако при обновлении страницы я получаю следующую ошибку:

Вот скриншот локального хранилища:

Что не так с моим кодом, что нужно исправить ?

Вам не нужно, чтобы JSON.parse ваш объект localStorage был таким

Поэтому измените на:

 class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = localStorage.getItem("app_state") ?? {
      account: {
        email: "",
        password: ""
      },
      token: "",
      auth: false
    };
  }

  componentDidUpdate(prevProps, prevState) {
    if (this.state.token !== prevState.token) { // Set a new state if token change
      localStorage.setItem("app_state", this.state);
    }
  }
...the rest of your component
 

Не забудьте очистить текущее хранилище, прежде чем пробовать новый код