如何为一系列已兑现的承诺设置状态

Question

在我的 React 应用程序中，我正在从 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。

如何为一系列已兑现的承诺设置状态

how to setState for an array of fulfilled promises

javascript

reactjs

firebase

async-await