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

在我看来，您的.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”）

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

1 个答案: