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

【问题标题】：I cant get the localStoarge data, i'm using useEffect Hook我无法获取 localStorage 数据，我正在使用 useEffect Hook
【发布时间】：2022-01-15 11:23:21
【问题描述】：

每次我尝试刷新页面时，它都会返回 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>

【问题讨论】：

能否请您在此问题的描述中提及代码 sn-p？或Display the image in the Description.
Please do not upload images of code/errors when asking a question.
因为您的第一个效果在每次更新（包括初始化）时都会运行，它将 localStorage 设置为 0，因为这是您在 useState 中设置的内容
那么我该如何解决它
是否有理由让setBestScore(highScore); 状态更新入队，然后在第一个useEffect 挂钩回调中立即用入队的setBestScore(turns); 更新覆盖它？

标签： reactjs react-hooks local-storage jsx use-effect

【解决方案1】：

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

如果您可能将您的状态初始化为存储在 localStorage 中的值，那么我建议使用延迟初始化函数，以便在初始渲染之前设置初始状态值，从而无需额外的 @ 987654323@ 从存储设置状态的钩子。这从 localStorage 读取并返回解析值，如果解析结果为 null 或未定义，则返回 0。

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

...

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

您将希望在 useEffect 上使用一个依赖数组，该数组将“highestScoresss”值持久保存在 localStorage 中，以便它仅在 bestScore 状态值更新并且不时触发> 在每个渲染中。

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

【讨论】：

【解决方案2】：

查看代码图像后，我认为您希望将bestScore 设置在本地存储中，并使用密钥highestScores。

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

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

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

推荐阅读