如何让组件“等待”状态在反应中更新？答案

【问题标题】：How to make the component "wait" for state to update in react?如何让组件“等待”状态在反应中更新？
【发布时间】：2021-08-07 16:37:12
【问题描述】：

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

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>
    )

}

【问题讨论】：

标签： javascript reactjs asynchronous react-hooks components

【解决方案1】：

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

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

如果创建游戏板是同步的但代价高昂，您可以将一个函数传递给 useState，该函数只会在第一次渲染时调用：

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

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

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>
);

【讨论】：