Реагирует ли элемент сетки с данными (массивом) с Firebase?

Относительно реактивно-сеточного макета Демонстрация 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>
 );
}

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

Спасибо за ваше время ~

0 ответов

Другие вопросы по тегам