Как сохранить состояние после обновления страницы в React.js?

Question

Допустим, у меня есть код, который устанавливает состояние для выбора коробки выбранной на предыдущей странице:

this.setState({selectedOption: 5}); 

Есть ли способ иметь this.state.selectedOption заселена 5 после обновления страницы?

Есть ли обратные вызовы, которые я могу использовать, чтобы сохранить это в localStorage, а затем сделать один большой setState или есть стандартный способ сделать что-то вроде этого?

Answer 1

Так что мое решение было также установлено localStorage при установке моего состояния, а затем получить значение из localStorage снова внутри getInitialState обратного вызова следующим образом:

getInitialState: function() { 
    var selectedOption = localStorage.getItem('SelectedOption') || 1; 

    return { 
     selectedOption: selectedOption 
    }; 
}, 

setSelectedOption: function(option) { 
    localStorage.setItem('SelectedOption', option); 
    this.setState({ selectedOption: option }); 
} 

Я не уверен, если это можно считать Anti-Pattern, но он работает, если нет лучшего решения.

Answer 2

У нас есть приложение, которое позволяет пользователю устанавливать «параметры» на странице. Мы устанавливаем эти параметры на URL-адрес, используя React Router (вместе с историей) и библиотеку, которая URI-кодирует объекты JavaScript в формате, который может использоваться в качестве строки запроса.

Когда пользователь выбирает опцию, мы можем нажать значение, что на текущий маршрут с:

history.push({pathname: 'path/', search: '?' + Qs.stringify(params)}); 

pathname может быть текущий путь. В вашем случае params будет выглядеть примерно так:

{ 
    selectedOption: 5 
} 

Затем на верхнем уровне React дерева, React маршрутизатор обновит props этого компонента с опорой на location.search, который закодированное значение мы установили ранее, так там будет что-то в componentWillReceiveProps как:

params = Qs.parse(nextProps.location.search.substring(1)); 
this.setState({selectedOption: params.selectedOption}); 

Затем этот компонент и его дети будут повторно вынести с обновленной настройки. Поскольку информация находится на URL-адресе, она может быть помечена закладкой (или отправлена ​​по электронной почте - это был наш прецедент), и обновление будет оставаться в том же состоянии. Это очень хорошо работает для нашего приложения.

Реагировать маршрутизатор: https://github.com/reactjs/react-router

История: https://github.com/ReactTraining/history

Строка запроса библиотека: https://github.com/ljharb/qs

Answer 3

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

Посмотрите на Redux-Упорство (если вы используете Redux) https://github.com/rt2zz/redux-persist

Answer 4

Вы можете «сохраняться» состояние с помощью локального хранилища, как Предлагайте Омар, но это должно быть сделано после того, как состояние было установлено. Для этого вам необходимо передать обратный вызов функции setState, и вам необходимо сериализовать и десериализовать объекты, помещенные в локальное хранилище.

constructor(props) { 
    super(props); 
    this.state = { 
    allProjects: JSON.parse(localStorage.getItem('allProjects')) || [] 
    } 
} 


addProject = (newProject) => { 
    ... 

    this.setState({ 
    allProjects: this.state.allProjects.concat(newProject) 
    },() => { 
    localStorage.setItem('allProjects', JSON.stringify(this.state.allProjects)) 
    }); 
}