Reactjs Обновить страницу

Question

Когда я нажимаю кнопку F5 в своем браузере, чтобы обновить свою страницу, я теряю все значения, которые у меня когда-то были в моем состоянии.Как сохранить значения в моем состоянии, нажав клавишу F5

Answer 1

У меня есть меню с подменю.Я инициализирую все мои основные меню в False, чтобы загрузить страницу и сказать, что подменю не открыты.Когда я нажимаю на меню, чтобы отобразить подменю, я говорю, что подменю открыто

      componentWillMount (){
    {this.props.routes.map((prop, key) => {
      if(prop.subMenus != null){
        this.setState({
          [prop.code]:false
        });
      }
    })}
  }

Answer 2

Как сказал другой, вы можете сохранить состояние маршрутов в localStorage (это как cookie, но лучше). Сохранить что-то с помощью localalstorage

localStorage.setItem('routes', JSON.stringify(this.props.routes))

А в методе componentDidMount вы можете сделать это

const routesString = localStorage.getItem('routes');
const routes = routesString ? JSON.parse(routesString) : undefined

Answer 3

Это немного сложно, но не невозможно.

Во-первых, сделайте это: Убедитесь, что страница перезагружается или обновляется в Javascript

Вы должны признать, чтоВаш сайт был перезагружен, и предыдущий код может помочь вам в этом.

Далее нужно выбрать место, где будет храниться ваше состояние до того, как перезагрузка действительно произойдет.Один из вариантов - сохранить его в локальном хранилище.

Для вас лучше всего, если все данные, которые вы пытаетесь сохранить, уже находятся на сервере.Если нет, то вам нужна некоторая «средняя точка» между обновлениями.

Вы можете сделать что-то подобное в той части, где вы узнаете, что магазин перезагружается:

// Site is reloading
// Store information into users local storage... all current 
// states with information of url under which data is stored

На месте,когда сайт снова загружается, вы можете выполнить:

// Check if there is something stored in local storage for this specific site
// When yes, fill in the states again with configured data

Теперь это может доставить вам много хлопот, но это сработает.Например, как насчет ситуаций, когда вы не хотите хранить свои данные.

Я предлагаю вам описать здесь ваш сценарий использования, и может быть более хороший подход к этой проблеме.