Javascript 如何使组件“等待”状态在react中更新？

我正在学习通过制作战舰游戏来做出反应。加载组件时，我创建一个新的对象板，并将其设置为状态。然后我想映射电路板本身，它是任何数组。然而，react说 无法读取未定义的属性板。 通过控制台日志记录，我发现最初加载页面时，Playboard是一个空对象，然后才使用SetPlayboard将其设置为给定对象。 我怎样才能避免这种情况

App.js如下所示：

const GameControl = () => {
    const [playerBoard, setPlayerBoard] = useState({})
    
    //creating the board object when component mounts, setting it as a state
    useEffect(() => {
        const playerBoard = GameBoard('player');
        setPlayerBoard({...playerBoard});
    },[])

    return (
        <div className = 'board-container'>
            <div className = "board player-board">

            {   //mapping an array
                playerBoard.boardInfo.board.map((cell, i) => {
                    return (
                        <div className = {`cell player-cell`key = {i}></div>
                    )
                } )
            }
            </div>
       </div>
    )

---

}

如果创建游戏板是同步的，则只需将其用作状态的默认值：

const [playerBoard, setPlayerBoard] = useState(GameBoard('player'));
// No use effect after this

如果创建gameboard是同步的，但代价很高，则可以将函数传递到useState，并且该函数仅在第一次渲染时调用：

const [playerBoard, setPlayerBoard] = useState(() => GameBoard('player'));

---

如果创建游戏板是异步的，那么使用效果是正确的，但是无法避免第一次渲染没有数据。您只需要确保您的组件在没有数据时可以工作。执行此操作的一种常见方法是，首先将状态设置为表示无数据的值，然后检查状态并返回占位符。空对象比空对象更容易检查，因此我建议：

const [playerBoard, setPlayerBoard] = useState(null);
    
useEffect(() => {
  // some asynchronous stuff, followed by a call to setPlayerBoard
},[])

if (!playerBoard) {
  return <div>Loading...</div>
  // Or if you don't want to show anything:
  // return null;
}

return (
  <div className='board-container'>
    // etc
  </div>
);