React:如何在Firestore onSnapshot和useEffect中使用最新状态

Question

我想更新我的状态，将新消息从Firestore onSnapshot添加到现有的消息数组中，但在onSnapshot中，我只能访问订阅完成时的状态。

const [messages, setMessages] = useState([]);
useEffect(() => {
const ref = firestore()
.collection('Msg_Messages')
return ref.onSnapshot(querySnapshot =>
setMessages(messages => messages.concat(querySnapshot.docs)))
}, [])

当我收到一条消息时，我会得到：

OnMountMessages + lastMessage

而不是

OnMountMessages + allMessagesSinceMount + lastMessage

我想是因为onSnapshot创建了他自己的messages和setMessages的副本。我能想到的唯一解决方案是使用Redux并将状态保持在组件之外，但还有其他解决方案吗？

Answer 1

在我看来，你的匿名函数to.onSnapshot在它的闭包中捕获了一个过时版本的消息。正如您所知，可以将函数传递给useState，但我认为编译器对冲突名称感到困惑。试试这个：

const [messages, setMessages] = useState([]);
useEffect(() => {
const ref = firestore()
.collection('Msg_Messages')
return ref.onSnapshot(querySnapshot =>
setMessages(prevmessages => prevmessages.concat(querySnapshot.docs)))
}, [])

在这种情况下，"prevmessages"来自useState，作为其状态的前一个值，并且不会与它的结果状态值"messages"混淆

(哦，还有：对于QuerySnapshot，属性是".docs"，而不是".data"(