使用React Native SectionList中Firebase的数据.数据结构问题

Question

我正试图在React Native SectionList中显示来自Firebase的数据。我有一些事件要在列表中显示给用户。

现在我在平面列表中显示它们，但我想每天以部分的形式向用户显示事件。这意味着我必须重组来自firebase数据库的代码。

我需要的结构如下：

[
{title: 'Title1', data: ['item1', 'item2']},
{title: 'Title2', data: ['item3', 'item4']},
{title: 'Title3', data: ['item5', 'item6']},
]

(来自React Native文档：(

<SectionList
renderItem={({item, index, section}) => <Text key={index}>{item}</Text>}
renderSectionHeader={({section: {title}}) => (
<Text style={{fontWeight: 'bold'}}>{title}</Text>
)}
sections={[
{title: 'Title1', data: ['item1', 'item2']},
{title: 'Title2', data: ['item3', 'item4']},
{title: 'Title3', data: ['item5', 'item6']},
]}
keyExtractor={(item, index) => item + index}
/>

以下是我从数据库中获取数据的方式：(在我的数据库中，我有事件的信息和每个事件的时间戳(

firebase.database().ref(`/userEvents/${uid}/`).orderByChild('timestamp').startAt(now)
.on('value', snapshot => {
thisArr = [];
snapshot.forEach((child) => {
thisArr.push(child.val());
});
dispatch({
type: GET_EVENTS_SUCCESS,
payload: thisArr
});
});

我已经解决这个问题好几个小时了，不知道提供这个数据结构的最佳方式是什么。我试过这样的东西：

firebase.database().ref(`/userEvents/${uid}/`).orderByChild('timestamp').endAt(now)
.on('value', snapshot => {
thisArr = [];
const dayData = {
title: '',
data: []
}; //contains title '', data []
const data = [];
snapshot.forEach((child) => {
const timestamp = child.val().timestamp;
const date = moment(timestamp).format('MM/DD/YYYY');
if (dayData.title === date) {
dayData.data.push(child.val());
} else {
dayData.title = date;
dayData.data.push(child.val());
}
thisArr.push(child.val());
});
dispatch({
type: GET_EVENTS_SUCCESS,
payload: thisArr
});
});

这里的问题是，我必须将每个dayData保存在另一个数组中，我不知道如何实现这一点。我也不认为这是一个好的解决方案。如果有人知道我如何实现这种结构，那就太好了。

Answer 1

您的代码几乎可以工作。您只需要确保每次一天(title(发生变化时都会创建一个全新的dayData对象：

示例

firebase
.database()
.ref(`/userEvents/${uid}/`)
.orderByChild("timestamp")
.endAt(now)
.on("value", snapshot => {
const result = [];
let dayData = { title: "", data: [] };
snapshot.forEach(child => {
const timestamp = child.val().timestamp;
const date = moment(timestamp).format("MM/DD/YYYY");
if (dayData.title === date) {
dayData.data.push(child.val());
} else {
dayData = { title: date, data: [child.val()] };
result.push(dayData);
}
});
dispatch({ type: GET_EVENTS_SUCCESS, payload: result });
});