我尝试做一些在我看来非常简单的事情。我有一个文档数组(firebase firestore),我有一个方法来从带有时间戳A的文档中获取到带有时间戳B的文档
在fetch函数中,尝试查看ref id是否已经被获取,但是fetchUpTo
函数中的messages
永远不会更新。按预期更新。顶部的日志是内部fetchUpTo
,底部的日志是effect
。这些日志是尝试重新获取底部日志中的一个文档时产生的。
const fetchUpTo = (ref: any) => {
if (isFetching || isAtEnd) {
return
};
if (!messagesSnapShot) {
return;
}
if (messagesSnapShot.size < queryLimit) {
return;
}
let index = messages.findIndex(d => d.id === ref.id)
if (index !== -1) {
if (messageRefs.current[index] !== null) {
scrollToMessage(messageRefs.current[index])
return;
}
}
setIsFetching(true)
const lastVisible = messages[0]
const cQuery = query(collection(fireStore, "scab-chat", chatId, "messages"), orderBy('time', 'desc'), startAfter(lastVisible.data.time), endAt(ref.data.time));
getDocs(cQuery).then(newDocs => {
if (newDocs.size < queryLimit) {
setIsAtEnd(true)
}
const newD = newDocs.docs.map(doc => ({
data: doc.data(),
id: doc.id,
ref: doc
}));
setMessages(s => {
const f = newD.filter(doc => s.findIndex(d => d.id === doc.id) === -1)
return [...s, ...f]
})
})
}
完成此操作后,我将使用Effect挂钩“等待”状态更新
useEffect(() => {
if (messages) {
setIsFetching(false)
}
}, [messages])
问题是我有一小部分代码
let index = messages.findIndex(d => d.id === ref.id)
if (index !== -1) {
if (messageRefs.current[index] !== null) {
scrollToMessage(messageRefs.current[index])
return;
}
}
1条答案
按热度按时间nxowjjhe1#
React状态只会在函数完成时重新呈现应用,因此您只会在再次调用fetchUpTo时检查更新后的消息。如果您需要在同一函数调用中使用更新后的值,请尝试使用flushSync。
有一个很好的视频与丹阿布拉莫夫试图实现与你一样,我会把它留在这里供参考:https://youtu.be/uqII0AOW1NM?t=2102