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

Posted 2023-02-22

【中文标题】React Hooks：如何在 useEffect 中设置状态？

【英文标题】：React Hooks: How to setState inside useEffect?

【发布时间】：2019-11-01 10:43:55

【问题描述】：

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

【问题讨论】：

你在console.log(dreams)看到了什么？

我看到一个空数组，@Boy With Silver Wings 下面的解决方案解决了它。

【参考方案1】：

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

但是 setDreams 在您的情况下是异步的还有另一个缺点，循环设置 dreams 的速度不足以让您能够传播它，您可能会丢失更新，您可以使用功能性setDreams。

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

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

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