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);

React Hooks：如何在useEffect中设置setState？

1 个答案: