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返回一个异步函数来设置状态。因此，在setDreams呼叫下方记录梦想不会给您任何结果。相反，您可以在外部登录useEffect以查看状态。

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

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

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

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