React Hooks：如何在 useEffect 中设置状态？

Question

我正在尝试从 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')
  }, [])

Answer 1

useState 很像对应的 setState returns 一个异步函数来设置状态。因此，在 setDreams 调用下方记录梦想不会给您任何结果。相反，您可以在 useEffect 之外登录以查看状态。

但是 setDreams 异步在你的情况下还有另一个缺点，循环没有设置 dreams 足够快让你能够传播它，你可能会在两者之间丢失更新，您可以使用功能 setDreams.

来解决这个问题

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

或者更好的是，您可以在最后保存所有数据和 setState。

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

React Hooks：如何在 useEffect 中设置状态？

React Hooks: How to setState inside useEffect?

firebase

reactjs

react-hooks