reactjs - react Hook : How to setState inside useEffect?

Question

我正在尝试从 firebase 获取数据并使用 useState Hook 将检索到的数据设置为我的状态。我知道我的 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 非常相似，返回一个异步函数来设置状态。因此，在 setDreams 调用下方记录梦想不会给您任何结果。相反，您可以在 useEffect 外部登录以查看状态。

但是 setDreams 在您的情况下是异步的还有另一个缺点，循环设置 dreams 的速度不够快，无法让您能够传播它，您可能会失去之间的更新，您可以使用功能 setDreams 修复此问题。

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

或者更好的是，您可以在最后保存所有数据并设置状态。

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