如何为一系列已履行的承诺设置状态

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。