为什么浏览器看不到本地存储元素的值？

Question

我正在使用React JS创建一个简单的俄罗斯方块游戏。除了App.js之外，我的主要组件是Tetris.js功能组件。在useEffect（）中，我正在使用本地存储存储舞台或当前播放器tetromino等组件。播放时，可以在控制台中检索数据，并且数据不为null。

useEffect(() => {
    localStorage.setItem("dropTimeStored", JSON.stringify(dropTime));
    localStorage.setItem("stageStored", JSON.stringify(stage));
    localStorage.setItem("playerStored", JSON.stringify(stage));
    localStorage.setItem("rowsClearedStored", JSON.stringify(rowsCleared));
    localStorage.setItem("scoreStored", JSON.stringify(score));
    localStorage.setItem("rowsStored", JSON.stringify(rows));
    localStorage.setItem("levelStored", JSON.stringify(level));
    localStorage.setItem("gameOverStored", JSON.stringify(gameOver));
}, [dropTime, stage, player, rowsCleared, score, rows, level, gameOver])

我想让用户选择立即关闭浏览器后继续游戏。那就是为什么在启动游戏功能时我正在做的事情：

const startGame = () => {
    console.log(loadLocalStorage);
    if (loadLocalStorage){
        setDropTime(JSON.parse(localStorage.getItem("dropTimeStored")));
        setStage(JSON.parse(localStorage.getItem("stageStored")));
        player = JSON.parse(localStorage.getItem("playerStored"));
        rowsCleared = JSON.parse(localStorage.getItem("rowsClearedStored"));
        setScore(JSON.parse(localStorage.getItem("scoreStored")));
        setRows(JSON.parse(localStorage.getItem("rowsStored")));
        setLevel(JSON.parse(localStorage.getItem("levelStored")));
        setGameOver(JSON.parse(localStorage.getItem("gameOverStored")));
    } else {
        localStorage.clear();
        setStage(createStage());
        setDropTime(1000);
        resetPlayer();
        setGameOver(false);
        setScore(0);
        setRows(0);
        setLevel(0);
    }        
}

但是“ loadLocalStorage”标志设置为True时，这意味着用户单击了该按钮并愿意继续游戏，但没有任何反应。从本地存储中检索到的元素为空，例如，该阶段没有任何元素-JSON.parse（localStorage.getItem（“ stageStored”））给我一个空的阶段，没有四苯胺。为什么会这样呢？关闭浏览器或关闭浏览器卡会刷新localStorage吗？谢谢。

Answer 1

似乎在具有Tetris的useEffect组件的第一个呈现中，在用户单击任何内容之前，将使用初始值运行useEffect回调。您可以通过在debugger;回调中放置useEffect作为第一条语句来进行检查。