Относительно response-grid-layout Demo 8 - Отзывчиво с LocalStorage
Является ли элемент реагирующей сетки принимать данные (массив), извлеченные из Firebase?
Поскольку кажется, что макеты (хранящиеся в локальном хранилище) для извлеченных данных (из Firebase) сбрасываются каждый раз, когда я перезагружаю . Это означает, что при каждой перезагрузке позиции этих данных располагаются в верхнем левом углу.
2-й дел:
Однако, жестко закодированный 2-й div не теряет свои макеты в локальном хранилище . Положение 2-й записки div остается после перезагрузки. Вот почему мне интересно, поддерживает ли react-grid-item
выборку данных из Firebase (или другой онлайн-базы данных).
1-й дел:
Я пытался axios
и fetch()
получить данные (массив) из Firebase через Redux (this.props.addedMemos
- это массив из хранилища Redux). Данные из Firebase извлекаются успешно. Если я не перезагружаю страницу и не изменяю размеры элементов сетки, макеты успешно меняются в локальном хранилище. Функции локального хранилища saveToLS
и getFromLS
тоже работают нормально.
Ниже приведен компонент моего класса (Memos.js) приложения memo:
...
...
...
render(){
return (
<div>
<ResponsiveReactGridLayout
className="layout"
breakpoints={{lg: 1200, md: 996, sm: 768, xs: 480, xxs: 0}}
cols={{ lg: 12, md: 10, sm: 6, xs: 4, xxs: 1 }}
rowHeight={40}
layouts={this.state.layouts}
onLayoutChange={(layout, layouts) =>
this.onLayoutChange(layout, layouts)
}>
{this.props.addedMemos.map(memo => (
{/* 1st div */}
<div key={memo.id}>
<div onClick={() => this.memoClicked(memo)}>
<h3>{memo.title}</h3>
<hr />
<div>{memo.content}</div>
</div>
</div>
{/* 2nd div */}
<div key="1">
<div>
<h3>Title</h3>
<hr />
<div>Content</div>
</div>
</div>
))}
</ResponsiveReactGridLayout>
</div>
);
}
Я ожидаю, что памятка извлеченных данных останется той же позиции после перезагрузки страницы. Однако эти записки сбрасывают свои сохраненные позиции в локальном хранилище после каждой перезагрузки.
Спасибо за ваше время ~