Реакция: Как использовать текущее состояние с Firestore onSnapshot и использовать Effect?

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")