获取 firestore 数据时加载

Question

我想在页面获取 firestore 数据时设置加载状态。我正在使用这个：

 const [isLoading, setIsLoading] = React.useState(true)
const fetchGames=async()=>{
    let promises = []
    const dataDB = await db.collection('event')
    const eventsFromDb = []
    const DB =await db.collection('event').get()
    DB.docs.forEach((item,index)=>{
      const promise = dataDB
      eventsFromDb[index]= item.data()
      promises.push(promise);
     })
     setEvents(eventsFromDb)
     Promise.all(promises)
     .then(setIsLoading(false));
    }
useEffect(()=>
    {
      fetchGames()
      if(!isLoading)
      {
        console.log("HEY")
      }

    }, [])

我无法在我的控制台中获取 HEY，如何解决这个问题？

Answer 1

就目前而言，您的 useEffect 方法仅运行用于组件安装。当状态更新时，您需要它运行。

您只需将您的状态添加为 useEffect 数组参数中的参数。像这样：

useEffect(()=>
{
  fetchGames()
  if(!isLoading)
  {
    console.log("HEY")
  }

}, [isLoading])

当 isLoading 状态更新时，这将运行对挂载和产生影响。

获取 firestore 数据时加载

Loading when fetching firestore data

javascript

firebase

reactjs