Node.js 分页/无限滚动时,Firebase endAt()与orderByChild()的古怪行为
我试图先加载用户的最新帖子,然后按降序分页,但在使用Node.js 分页/无限滚动时,Firebase endAt()与orderByChild()的古怪行为,node.js,reactjs,firebase,firebase-realtime-database,infinite-scroll,Node.js,Reactjs,Firebase,Firebase Realtime Database,Infinite Scroll,我试图先加载用户的最新帖子,然后按降序分页,但在使用endAt().limitToLast()和orderByChild()时遇到问题 我可以使用startAt().limitToFirst()和orderByChild()对项目进行分页,但是我需要从末尾加载列表。。。使用endAt()执行查询时,orderByChild()似乎被忽略 这是我的类别节点的JSON { "-LY8EYaWHINB1khsIEvJ" : { "Recipies" : true, "usernam
endAt().limitToLast()
和orderByChild()
时遇到问题
我可以使用startAt().limitToFirst()
和orderByChild()
对项目进行分页,但是我需要从末尾加载列表。。。使用endAt()
执行查询时,orderByChild()似乎被忽略
这是我的类别
节点的JSON
{
"-LY8EYaWHINB1khsIEvJ" : {
"Recipies" : true,
"username" : "User1"
},
"-LYDaIrnDKIWndMcLE-g" : {
"Recipies" : true,
"username" : "User4"
},
"-LY8Em4B6COFk3how5FC" : {
"Buds" : true,
"username" : "User2"
},
"-LY8Eq2E1muFcOBstODa" : {...},
"-LY8Esi98QdhszIgvRRN" : {...},
"-LY9OSc7u8wTNQaJ7BXL" : {...},
"-LY8EymPGxK8Y_YnRfC0" : {...},
"-LY8F0RrYbLNPpYwIuMX" : {...},
"-LY8F3QfERAhOq3iW3jC" : {...},
}
下面是我的查询的样子(注意,我需要从下往上取):
当我简单地将查询切换为使用startAt().limitToFirst()
而不是orderByChild()
时,所有这些问题都消失了
非常感谢在这个问题上我能得到的所有帮助,干杯 所以,在尝试了几乎所有的方法之后,我所要做的就是添加
startAt(true)
。我不知道为什么,但它起作用了。我有其他的查询,几乎与此相同,没有它也可以工作-比我的。。。我很想知道为什么我需要它才能工作
这是我的工作代码:
const fetchCategoryImages = (category, currentImages, lastKey) => {
if (!lastKey) {
return () => {
firebase.database().ref('/categories')
.orderByChild('Recipies' //this is the category)
//THE SOLUTION
.startAt(true)
.endAt(true)
.limitToLast(4)
.on('value', snapshot => {
const arrayOfKeys = Object.keys(snapshot.val())
.sort()
.reverse();
const results = arrayOfKeys
.map((key) => snapshot.val()[key]);
const createLastKey = arrayOfKeys[arrayOfKeys.length - 1];
//just passing the initial data with redux here... (snapshot and lastKey...)
});
};
} else {
//subsequent fetch if there is a lastKey to reference start point
return () => {
firebase.database().ref('/categories')
.orderByChild('Recipies' //this is the category)
//THE SOLUTION
.startAt(true)
.endAt(true, '-LY9OSc7u8wTNQaJ7BXL' //this is the lastKey)
.limitToLast(3)
.on('value', snapshot => {
const arrayOfKeys = Object.keys(snapshot.val())
.sort()
.reverse()
.slice(1);
const results = arrayOfKeys
.map((key) => snapshot.val()[key]);
const createLastKey = arrayOfKeys[arrayOfKeys.length - 1];
const concatImages = _.concat(currentImages, results);
//passing the new data with redux here... (snapshot and lasy ley...)
}
});
};
};
我只是用这个JSON进行测试:
{
"-LY8EYaWHINB1khsIEvJ" : {
"Recipies" : true,
"username" : "User1"
},
"-LY8Em4B6COFk3how5FC" : {
"Buds" : true,
"username" : "User2"
},
"-LY8Eq2E1muFcOBstODa" : {
"Buds" : true,
"username" : "User3"
},
"-LY8Esi98QdhszIgvRRN" : {
"Buds" : true,
"username" : "User4"
},
"-LY8EymPGxK8Y_YnRfC0" : {
"Buds" : true,
"username" : "User5"
},
"-LY8F0RrYbLNPpYwIuMX" : {
"Buds" : true,
"username" : "User6"
},
"-LY8F3QfERAhOq3iW3jC" : {
"Receipies" : true,
"username" : "User7"
},
"-LY9OSc7u8wTNQaJ7BXL" : {
"Buds" : true,
"username" : "User8"
},
"-LYDaIrnDKIWndMcLE-g" : {
"Recipies" : true,
"username" : "User8"
}
}
该代码:
ref.orderByChild('Buds')
.endAt(true, '-LY9OSc7u8wTNQaJ7BXL')
.limitToLast(3)
.once('value', snapshot => {
snapshot.forEach(child => {
console.log(child.key+": "+JSON.stringify(child.val()));
})
})
现场样品:
运行此命令时,将打印:
“-LY8EymPGxK8Y\u YnRfC0:{\'bubs\':true,\'username\':\'User5\'”
“-LY8F0RRYBLNPYWIUMX:{\'BUBEDS\':true,\'username\':\'User6\'”
“-LY9OSc7u8wTNQaJ7BXL:{\'bubs\':true,\'username\':\'User8\'”
请注意它是如何跳过那里的
User7
,因为该用户没有Buds
属性。这里有一些我们不知道的值,很难看出问题的根源。您能否:1)在不依赖react/redux的代码段中重现问题?2) 使用lastKey
和category
的硬编码值复制它?3) 共享用于复制它的最小JSON(作为文本,请不要截图)?您可以通过单击溢出菜单中的“导出JSON”链接来实现这一点(⠇) 关于你的。@FrankvanPuffelen嘿,Frank!谢谢你,我刚刚更新了我的答案-希望这有帮助。这有帮助,谢谢你。尽管如此,我仍然很难理解确切的问题。1)你能进一步减少代码,只显示不起作用的情况吗?2) 你能把问题的描述减少到只包括不起作用的情况吗?我希望我能对这些改变有更多的帮助。@FrankvanPuffelen由于另一个问题,我打算删除这个问题,我刚刚看到你的评论,对不起!我编辑此问题以匹配其他问题。不要删除现有问题,然后重新发布。澄清你原来的问题。再次发布您自己的问题将被标记并提醒版主。嗯。。。这有点道理,因为您只需要具有Recipies
属性的结果。我主要担心的是我不能复制它。请参阅我的答案中的数据、代码和链接(因为代码不会包含在注释中)。
ref.orderByChild('Buds')
.endAt(true, '-LY9OSc7u8wTNQaJ7BXL')
.limitToLast(3)
.once('value', snapshot => {
snapshot.forEach(child => {
console.log(child.key+": "+JSON.stringify(child.val()));
})
})