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

我認為您應該更加關注代碼的結構，使其更具可讀性，從而避免此類錯誤。 如果這還不足以解決您的問題，您可以進一步指定，我會額外查看。