我无法获取 localStorage 数据，我正在使用 useEffect Hook

Question

每次我尝试刷新页面时，它 returns 为 0。当匹配等于 6 时，我从轮流中获取 bestScore，所以基本上每次匹配的牌达到 6 时，它都会从回合中获取 bestScore 并将 bestScore 保存到 localStoarge 并且它有效但是当我尝试刷新它时

 function App() {
      const [cards, setCards] = useState([]);
      const [turns, setTurns] = useState(0);
      const [match, matchedCards] = useState(0);
        const [bestScore, setBestScore] = useState(
    localStorage.getItem("highestScoresss")
  );
  const [choiceOne, setChoiceOne] = useState(null); //Kullanici 1.karta basinca setChoiceOne o karti alacak ve guncelliyecek
  const [choiceTwo, setChoiceTwo] = useState(null); //Kullanici 2.karta basinca setChoiceTwo o karti alacak ve guncelliyecek
  const [disabled, setDisabled] = useState(false);
  useEffect(() => {
    if (match === 6) {
      const highScore = Math.min(turns, bestScore);
      setBestScore(highScore);
      setBestScore(turns);
    } else {
      console.log("false");
    }
  }, [turns]);
  useEffect(() => {
    localStorage.setItem("highestScoresss", JSON.stringify(bestScore));
  });

这就是 JSX

<div className="bilgi">
        <p>Sıra: {turns}</p>
        <p>Bulunan: {match}</p>
        <p>En iyi Skor: {bestScore}</p>
        <button onClick={shuffleCards}>Yeni Oyun</button>
      </div>
    </div>

Answer 1

查看代码图像后，我认为您希望使用密钥 highestScores.

在本地存储中设置 bestScore

您当前的 useEffect 挂钩实现缺少依赖项数组。您希望每次设置新的 bestScore 时更新 localStorage。为此，将 bestScore 添加到依赖项数组。

useEffect(() => /* YOUR OPERATION*/, [any_dependency])

此外，我建议您再次查看您的第一个 useEffect 实现。您似乎将 bestScore 状态设置了两次。一次 highScore 然后 turns.

推荐阅读

About Dependency Array - ReactJS Docs

Answer 2

您实施的问题是您首先将状态设置为 0 ，然后是 useEffect 挂钩运行并将 localStorage 设置为状态值。

如果您可能将状态初始化为存储在 localStorage 中的值，那么我建议使用惰性初始化函数，这样初始状态值设置为在初始渲染之前并消除需要额外的 useEffect 挂钩来设置存储状态。这从 localStorage 和 returns 读取解析值，或者 0 如果解析结果为 null 或未定义。

const initializeState = () => {
  return JSON.parse(localStorage.getItem("highestScoresss")) ?? 0;
};

...

const [bestScore, setBestScore] = useState(initializeState());

您将希望在 useEffect 上使用一个依赖数组，该数组在 localStorage 中保留“highestScoresss”值，这样它仅在 bestScore 状态值更新和不是在每个渲染上。

useEffect(() => {
  localStorage.setItem("highestScoresss", JSON.stringify(bestScore));
}, [bestScore]);

我无法获取 localStorage 数据，我正在使用 useEffect Hook

I cant get the localStoarge data, i'm using useEffect Hook

jsx

local-storage

reactjs

react-hooks

use-effect

推荐阅读