next.js 等待使用Effect挂接更新后,React状态是否返回旧值?

jvidinwx  于 2022-11-05  发布在  React
关注(0)|答案(1)|浏览(155)

我尝试做一些在我看来非常简单的事情。我有一个文档数组(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;
        }
    }
nxowjjhe

nxowjjhe1#

React状态只会在函数完成时重新呈现应用,因此您只会在再次调用fetchUpTo时检查更新后的消息。如果您需要在同一函数调用中使用更新后的值,请尝试使用flushSync
有一个很好的视频与丹阿布拉莫夫试图实现与你一样,我会把它留在这里供参考:https://youtu.be/uqII0AOW1NM?t=2102

相关问题