React Hooks: How to setState inside 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()])

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

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