reactjs - 如何在 React 中设置和获取 LocalStorage 的状态

Question

我正在创建一个纸牌游戏，我想获得游戏状态值，localstorage以防止用户在刷新时再次重新加载。

这是我的游戏挂钩：

import { useEffect, useState } from "react";
import {populateOneSuitCards,
 } from "../logic/GameStart/GameStart";
import { isPersistedState } from "../logic/Helper/Helper";

const useGameHooks = () =>{
   const [time, setTime] = useState(0);
   const [game, setgame] = useState({
   cards: [],
   decks: [],
   selectedCard: "",
   selectedDeck: "",
   selected: [],
   hands: 0,
   x: -1,
   y: -1,
   highlightedDeck: "",
   highlightedCard: "",
   remCardDeck:5,
   score:0,
});

const setUpGame = () =>{
  const val = populateOneSuitCards();
  let interval = null;

   setgame((prev) => ({
    ...prev,
    cards: val.cards,
    decks: val.decks,
   }));

   interval = setInterval(() => {
    setTime((prevTime) => prevTime + 1);
   }, 1000);
  }


useEffect(() => {

const localState = isPersistedState('gameState');

if(localState){
  setgame(localState);
  return;
 }
 setUpGame();
}, []);

useEffect(() => {

  localStorage.setItem('gameState',JSON.stringify(game))

}, [game])

return {
 time, game, setgame
}
}
export default useGameHooks;

是持久状态

  export const isPersistedState = stateName =>{
   const localState = localStorage.getItem(stateName);
   return localState && JSON.parse(localState);
   }

填充OneSuitCards

export const populateOneSuitCards = () => {
let cards = [],
  decks;
cardInfo["rank"].forEach((rank) => {
  for (let i = 1; i <= 8; i++) {
    cards.push({
      rank: rank,
      suit: "spade",
      isDown: true,
      deck: i,
    });
  }
 });
  let shuffledCards = shuffleCardForGame(cards);
  decks = DealCards(shuffledCards);
  return {
  decks: decks,
  cards: shuffledCards,
  };
 };

const shuffleCardForGame = (cards) =>{
const  shuffledCards = _.shuffle(cards);
return shuffledCards;
 }

const DealCards = (shuffledCards) =>{
 let result;
 result = _.chunk(shuffledCards.slice(0, 50), 5);

 result[0].push(shuffledCards[50])
 result[1].push(shuffledCards[51])
 result[2].push(shuffledCards[52])
 result[3].push(shuffledCards[53]) 
 result[4]= [shuffledCards[54]]
 
 result[10] = shuffledCards.slice(55);
 
 for (let i = 0; i <= 9; i++) {
   result[i][result[i].length - 1].isDown = false;
 }

  return result;
 }

在这段代码中，本地存储一直是初始值。但是我想setUpgame在那之后首先运行它从本地存储中获取状态的任何更改。

标签： reactjsreact-hookslocal-storagestatereact-state