如何為一系列已履行的承諾設置狀態

Question

在我的反應應用程序中，我正在從 firebase 檢索一些數據，但是當我嘗試將項目存儲在我的狀態時，它僅存儲已履行承諾的第一項，

const HomePage = (props) => {
  const [events ,setEvents] = React.useState([])
const fetchGames=async()=>{
    const DB =await db.collection('game').get()

    DB.docs.forEach(item=>{
      setEvents([...events,item.data()])
      console.log(item.data()); // Here shows all the items that stored in my firebase collection
     })
    }
    
    useEffect(()=>
    {
      fetchGames()
    }, [])
return(
<div>
{
     events.map((event)=>
        (
          <div>
            {event.home_color}
          </div>

        )
        )
    }
</div>
)

最終事件狀態將只顯示一個項目，不像控制台日志中顯示所有項目，如何解決這個問題？

Answer 1

React 狀態不是synchronous的。 因此，在 for 循環中更新狀態並不能保證每次迭代都會獲得更新的狀態。

您可以在forEach中准備最終對象，然后在完成后更新狀態。 就像是 -

const fetchGames=async()=>{
    const DB =await db.collection('game').get()
    const eventsFromDb = [];
    DB.docs.forEach(item=>{
      // update eventsFromDb array here 
    })
    // set state here
    setEvents(eventsFromDb);
}

Answer 2

在 forEach 循環中重復調用setEvents不允許實際更新狀態，因為 React 的 useState 鈎子不是同步的。

你可以這樣做：

setEvents([ ...events, ...DB.docs.map(item => item.data())])

假設data()方法不是異步的 - 抱歉我不知道 Firebase。