react-grid-item是否接受从Firebase获取的数据（数组）？

Question

关于react-grid-layout Demo 8 - Responsive with LocalStorage

react-grid-item是否接受从Firebase提取的数据（数组）？

因为每次我重新加载时，似乎（来自Firebase的）提取数据的布局（存储在本地存储中）正在被重置。这意味着这些数据的位置将在每次重新加载时堆叠在左上角。

第二个分区：

但是，硬编码的第二个div不会在本地存储中丢失其布局。重新加载后，第二个div备忘录的位置仍然保留。这就是为什么我想知道react-grid-item是否支持从Firebase（或其他在线数据库）获取数据。

第一分区：

我尝试过axios和fetch()通过Redux从Firebase获取数据（一个数组）（this.props.addedMemos是Redux store中的一个数组）。从Firebase成功获取了数据。如果我不重新加载页面并调整网格项目的大小，则布局将在本地存储中成功更改。本地存储功能saveToLS和getFromLS也可以正常工作。

下面是备忘录应用程序的类组件（Memos.js）：

...
...
...
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>
 );
}

我希望在重新加载页面后，获取的数据的备注将保持不变。但是，这些备忘录在每次重新加载后都会重置其在本地存储中的存储位置。

谢谢您的时间〜