React 2d Array of randomly placed components 不同步

Question

我正在尝试在 React 中创建扫雷程序并运行遇到了一个严重的问题。

我创建了一个名为游戏的带有炸弹和盒子组件的二维数组，一切正常，除了在创建原始游戏后的某个时间创建了一个全新版本的游戏。

我 console.log 组件呈现之前的游戏，这与显示的游戏完全不同。我有一个按钮，控制台在呈现后记录当前游戏，并在屏幕上显示游戏。

    function setBombs() {
        //creates map of board ie. [[false, false, false], [false, true, false], [false, false, false]]
    }
    console.log(game)
    //Prints empty. Good
    setBombs();
    for (let i = 0; i < Map.length; i++) {
        let arr = []
        for (let j = 0; j < Map[i].length; j++) {
            // pushes true(bomb) or false(box) depending if it is going to be a bomb
            // pushes bomb or numbered box component based on a map created before
            arr.push(decideBomb(numBombs, i, j));
        }
        game.push(arr);

        //Prints each version of game. Good
        console.log(game)
    }
    //Prints Correct game. Good
    console.log(game);
    return (
        <div>
            <h1>Minesweeper</h1>
            {/* Ends up being different game. Bad!  goal: make them the same*/}
            <div style={style} className="Grid">{game}</div>
            <button onClick={()=>{console.log(game)}}>clgrid</button>
        </div>
    );

我希望for循环中的版本与屏幕上的版本相同。

我应该找到解决方法吗？或者有什么方法可以防止生成不同的游戏吗？

Answer 1

您应该尝试将您的函数放入 useEffect，（就像你的 for 循环和你的 setBombs() 电话）这样代码只会像这样执行一次：

React.useEffect(() => {
    setBombs();
    for (let i = 0; i < Map.length; i++) {
        let arr = []
        for (let j = 0; j < Map[i].length; j++) {
            // pushes true(bomb) or false(box) depending if it is going to be a bomb
            // pushes bomb or numbered box component based on a map created before
            arr.push(decideBomb(numBombs, i, j));
        }
        game.push(arr);

        //Prints each version of game. Good
        console.log(game)
    }
}, [])

文档 here.

React 2d Array of randomly placed components 不同步

React 2d Array of randomly placed components desync

multidimensional-array

minesweeper

reactjs

react-hooks