在 React JS 中重新渲染后，localStorage 值不断变化

Question

我正在尝试制作一个骰子游戏，该游戏使用 function 来存储最少的掷骰数和完成游戏所需的最短时间，该游戏将其与其他时间值进行比较并掷出并将最低值存储在本地存储中。localStorage 中的值保持不变重新渲染或刷新后变回 0

这是代码的链接

我似乎不知道为什么应用程序将值更改为其初始值 state 并将本地存储中的值更改为 0

Answer 1

由于在程序开始时 rolls 总是低于 bestRolls，因为 setRecords function，bestRolls 将被设置为 rolls。

function setRecords() {
    if (!bestRolls || rolls < bestRolls) {
        console.log(rolls);
        setBestRolls(rolls);
    }
    if (!bestTime || time / 10 < bestTime) {
        console.log(time);
        setBestTime(time);
    }
}

这将始终在您的 useEffects 之一中调用。

React.useEffect(() => {
    let anyVal = die[2].value;
    let heldValues = die.every((die) => die.isHeld);
    let equalValues = die.every((die) =>
        die.value === anyVal ? true : false
    );
    if (heldValues && equalValues) setTenzies(true);
    setStart(false);
    setRecords();
}, [die]);

这就是为什么您的 bestRolls 会重置每次重新渲染。 我也不确定你的程序应该做什么，所以我不能说这是不是有意为之，但即使你修复了这个并且 bestRolls 没有重置，当你按下按钮时它们也会重置，因为 rollDice 设置了滚动为其起始值 (0) 加 1，然后将 bestRolls 设置为该值。

function rollDice() {
    if (!tenzies) {
        setDie((prevDie) =>
            prevDie.map((die) => {
                if (die.isHeld) return die;
                else return generateNewDice();
            })
        );
    } else {
        resetGame();
    }
    setRolls((prevRoll) => prevRoll + 1);
    setBestRolls(rolls + 1);
}

我认为您应该更加关注代码的结构，使其更具可读性，从而避免此类错误。 如果这还不足以解决您的问题，您可以进一步指定，我会额外查看。