Как визуализировать компоненты React с данными из localStorage?
Я создаю приложение React, в котором большая часть содержимого приложения реакции извлекается из localStorage. Вместо использования базы данных при запуске приложения первое, что делается, - это заполнение localStorage данными, затем HTML создается из JS с использованием данных из localStorage ....
Но теперь с React я начинаю переходить от жесткого кодирования информации к использованию ее из localStorage. Однако кажется, что реагирующие компоненты отображаются до JS, загружающего localStorage. Используя console.info, я обнаружил, что рендеринг React был выполнен раньше всего. Как я могу убедиться, что HTML (из компонентов реакции) не реализован до тех пор, пока ПОСЛЕ выполнения JS, который создает localStorage?
ОСНОВНОЙ КОМПОНЕНТ ПРИЛОЖЕНИЯ
class App extends React.Component {
constructor(props) {
super(props);
console.info("Constructing App");
}
render() {
return (
<div>
<Navigation {this.title: "Something based on localStorage"/>
</div>
)}
}
НАВИГАЦИОННЫЙ КОМПОНЕНТ
function Navigation(props) {
console.info("Constructing Nav");
return ("stuff here pulled from props like props.title")
}
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 3
Можно использовать локальное хранилище getItemметод -
localStorage.getItem('myData');
class App extends React.Component {
constructor(props) {
super(props);
state: {
myData: {}
}
}
componentDidMount(){
const myData = localStorage.getItem('myData');
// set the state with the data
this.setState({myData});
}
render() {
return (
<div>
<Navigation title = {this.state.myData} />
</div>
)}
}
где jQuery в вашем посте? вы впервые упомянули об этом, и какое отношение имеет jQuery к localStorage?
@ user10059818 вы никогда не упоминали jQuery в своем вопросе.
@ user10059818 В любом случае, если вам нужны данные перед монтированием компонента, вы можете сделать это методом constructor.
Я мог бы вызвать свою функцию loadMyDataInStorage (), однако из-за асинхронности React продолжит отрисовывать все остальное после того, как вызовет функцию .... Это означает, что все еще отрисовывается до завершения функции LoadMyDatainStorage ().
@ user10059818 где асинхронный код в этом коде? localStorage.getItem не асинхронный. это просто зависит от того, какой жизненный цикл реакции вы используете, тот, который вызывается до или после установки
опять же проблема не в getLocalStorage. это функция, которую у меня есть loadMyDataInStorage (), которая помещает информацию В localStorage. это требует времени и завершается только после Render of React
@ user10059818 тогда включите реальную проблему в свой вопрос. Аган, я не знаю, почему ваша функция асинхронна, поскольку localStorage.setItem тоже не асинхронен. В общем, когда у вас есть функция синхронизации и вы хотите вызвать что-то, когда это будет сделано, вы можете передать обратный вызов или использовать async await (вам нужно будет вернуть обещание для создания микрозадачи).
@ user10059818 это функция, которую у меня есть loadMyDataInStorage (), которая помещает информацию в localStorage. Тогда нет смысла использовать localStorage в качестве единственного источника истины (это то, что вы пытаетесь сделать). У вас проблема XY.
Позвольте мне попробовать немного пересмотреть ваш код:
class App extends React.Component {
constructor(props) {
super(props);
console.info("Constructing App");
this.state = {
fromLocal:''
}
}
componentDidMount(){
let newSearchColumns = localStorage.getItem('searchColumns');
this.setState({fromLocal: newSearchColumns})
}
render() {
return (
<div>
<Navigation title= {this.state.fromLocal}/>
</div>
)}
}
Вам следует изучить следующее: Методы жизненного цикла а также Локальное хранилище
Методы компонента React по умолчанию запускаются в определенной последовательности («жизненный цикл» компонента).
Если у вас есть операции, которые вы хотите выполнить, например создание localStorage, вы можете разместить их раньше в последовательности.
Инициализация, и монтирование происходят до рендеринга, поэтому вы можете создать localStorage на любом из этих этапов. В частности, попробуйте переопределить метод componentWillMount ().
это вообще не решает проблему. Это получает файл localStorage. Но проблема в том, что он получит localStorage ДО того, как он будет заполнен моим JQuery. Мне нужен React для загрузки компонентов ПОСЛЕ заполнения хранилища