Как сохранить состояние перед переключением на другой компонент в React JS
Для компонента реакции, который отображает таблицу с некоторыми данными, я установил некоторые фильтры в состоянии
this.state = {
filters: {
id: '',
status: '',
language: '',
project: ''
}
};
Если я добавлю фильтр, состояние будет установлено соответствующим образом
filters: {
id: '1',
status: '2',
language: 'EN',
project: '101'
}
В этом компоненте вы можете щелкнуть ссылку «страница подробностей» (это просто <a href>), чтобы приложение переключилось на другой компонент, чтобы показать проект в деталях. На этой странице сведений есть обратная ссылка для возврата к таблице данных.
Моя проблема в том, что фильтры исчезают, как только я переключаюсь обратно. Как можно сохранить состояние, чтобы, как только я переключился обратно, я мог показать ранее выбранные данные фильтра? Какие есть варианты?
1. использовать localStorage или 2. поднять состояние до компонента, который не размонтируется при смене страницы
Ответы 1
В reactJS, если вы будете использовать <a href = "linkOfTheTarget">, оно будет повторно отображать все приложение, несмотря на то, что отрисовывается компонент, на который вы нацелены. Вы можете использовать https://reactrouter.com/web/api/Link, чтобы сделать ваше приложение надежным. Вы можете использовать управление состоянием, например react-redux, для сохранения состояния независимо от повторного рендеринга приложения. Но проблема с react-redux заключается в том, что если пользователь обновит страницу, данные будут потеряны. Так что вы можете
onChange = {(e) => {
this.setState({filters: {...this.state.filters, language: e.target.value} });
localStorage.setItem("filteredLang", e.target.value);
}
Эта проблема кажется такой же, поэтому проверьте это решение: stackoverflow.com/questions/53699298/…