React中Effect Hook等待更新后fetchUpTo仍获取旧messages状态值问题

我需要实现从Firebase Firestore获取时间戳A到B之间的文档数组，但fetchUpTo函数内的messages状态一直是旧值，尽管监听messages的Effect Hook能正常打印更新后的状态。问题出在判断目标文档是否已被获取的逻辑上，旧的messages值导致该逻辑出错，无法正确识别已存在的文档。

核心原因：React闭包陷阱 #

fetchUpTo函数在组件渲染时被定义，会捕获当前渲染周期的messages状态值。后续messages通过setMessages更新后，函数内部的messages依然是最初捕获的旧值，不会自动同步最新状态，这就是React的闭包陷阱。

解决方法：用useRef保存最新状态 #

通过useRef来存储messages的最新值，因为ref的.current属性是可变的，不受闭包限制，能实时反映状态更新：

步骤1：定义并同步messagesRef #

在组件内添加以下代码，让messagesRef始终指向最新的messages状态：

const messagesRef = useRef(messages);

useEffect(() => {
  // 每次messages更新时，同步到ref的current属性
  messagesRef.current = messages;
}, [messages]);

步骤2：修改fetchUpTo函数中的状态引用 #

把函数内所有用到messages的地方，替换为messagesRef.current：

const fetchUpTo = (ref: any) => {
    if (isFetching || isAtEnd) {
        return
    };
    if (!messagesSnapShot) {
        return;
    }
    if (messagesSnapShot.size < queryLimit) {
        return;
    }
    // 改用messagesRef.current获取最新状态
    let index = messagesRef.current.findIndex(d => d.id === ref.id)
    if (index !== -1) {
        if (messageRefs.current[index] !== null) {
            scrollToMessage(messageRefs.current[index])
            return;
        }
    }
    setIsFetching(true)
    // 这里同样要替换为最新状态
    const lastVisible = messagesRef.current[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]
        })
    })
}

补充说明 #

除了findIndex的判断逻辑，原代码中const lastVisible = messages[0]也存在同样的闭包问题，必须同步替换为messagesRef.current[0]，否则会基于旧状态生成错误的查询条件。

内容的提问来源于stack exchange，提问作者Kedalen12