React Hooks: Как установитьState внутри useEffect? - PullRequest
Новая
       10

React Hooks: Как установитьState внутри useEffect?

0 голосов
/ 18 июня 2019

Я пытаюсь получить данные из firebase и установить полученные данные в мое состояние, используя хук useState. Я знаю, что мой вызов API работает, потому что я могу регистрировать данные из firebase, но они не попадают в мое состояние, когда я использую setState (), по какой-то причине я получаю только пустой массив в состоянии. Чего мне не хватает? 

const Collection = () => {
  const [ dreams, setDreams ] = useState([])

  useEffect(() => {
    const retrieveCollection = (userId) => {
      firebase.firestore().collection('Dreams')
        .where('user', '==', userId)
        .onSnapshot(snapshot => {
          let newDreams = snapshot.docChanges()
          newDreams.forEach(doc => {
            console.log(doc.doc.data())
            setDreams([...dreams, doc.doc.data()])
            console.log(dreams)
          })
        })
    }
    retrieveCollection('N25c9lKITZQ7JtPEZSrMX6uC7Ot2')
  }, [])

1 Ответ

1 голос
/ 18 июня 2019

useState так же, как его аналог setState возвращает асинхронную функцию для установки состояния. Так что регистрация снов чуть ниже setDreams звонка не даст вам никаких результатов. Вместо этого вы можете войти внутрь за пределами useEffect, чтобы увидеть состояние.

Но setDreams асинхронность имеет еще один недостаток в вашем случае, цикл не устанавливает dreams достаточно быстро, чтобы вы могли его распространять, вы можете потерять обновления между ними, вы можете исправить это, используя функционал setDreams. 

setDreams(prevDreams => [...prevDreams, doc.doc.data()])

Или, что еще лучше, вы можете сохранить все свои данные и установить состояние в самом конце. 

const newDreamsState = newDreams.map(
  return doc.doc.data();
});
setDreams(newDreamsState);
...