代码之家 › 专栏 › 技术社区 › Kevin Mosley

React:从本地存储读取映射返回null值

maps local-storage react-hooks reactjs javascript

Kevin Mosley · 技术社区 · 10 月前

我正在制作一个小型游戏网站,用户可以在“简单、中等和困难”难度之间进行选择,我使用一个挂钩类型地图来跟踪每个难度的猜测次数。我让它正常工作,但问题是我想保存用户的猜测,这样如果他们回来,网站就会记住他们在游戏中的位置,类似于Wordle这样的游戏。但是,如果localstorage为空,则下面的代码返回undefined,而它应该返回6,如下所示。

const Demo = () =>
{
    const [guessCount, setGuessCount] = useState(new Map()); // Key: [difficulty, count]

    const updateGuessCount = (key: string, value: any) =>
    {
        setGuessCount(map => new Map(map.set(key, value)));
    }

    useEffect(() => 
    {
        updateGuessCount("easy",  localStorage.getItem("easyGuessCount") || 6);
        updateGuessCount("medium", localStorage.getItem("mediumGuessCount") || 6);
        updateGuessCount("hard", localStorage.getItem("hardGuessCount") || 6);

    }, []);

    useEffect(() => 
    {
        localStorage.setItem("easyGuessCount", guessCount.get("easy"));
        localStorage.setItem("mediumGuessCount", guessCount.get("medium"));
        localStorage.setItem("hardGuessCount", guessCount.get("hard"));

    }, [guessCount]);
}

如果本地存储为空,我希望所有值都是6,但它返回undefined。useEffects()的异步行为使得调试变得困难。

1 回复 | 直到 10 月前

Sagar Kumar 10 月前

问题分析

本地存储值: 从检索时 本地存储 ,值是字符串。如果 本地存储为空 ,localStorage.getItem返回null,并应用||6回退,即对的。但是,localStorage.getItem返回null表示您的回退值正在使用中 正确地 ,但在Map的上下文中处理不当。

地图处理: 当你 创建或更新 a Map,确保您正确地将回退值转换为适当的类型(在本例中为数字)。

状态初始化: 您应该正确初始化映射,并将值从localStorage转换为数字,因为localStorage将所有内容都存储为字符串。

这是一个 修订版 对代码进行更正:

import React, { useState, useEffect } from 'react';

const Demo = () => {
    // Initialize state with default values
    const [guessCount, setGuessCount] = useState(() => {
        // Retrieve values from localStorage and convert to numbers
        const easy = Number(localStorage.getItem("easyGuessCount")) || 6;
        const medium = Number(localStorage.getItem("mediumGuessCount")) || 6;
        const hard = Number(localStorage.getItem("hardGuessCount")) || 6;

        // Initialize Map with default values
        return new Map([
            ["easy", easy],
            ["medium", medium],
            ["hard", hard]
        ]);
    });

    // Update guess count in state
    const updateGuessCount = (key, value) => {
        setGuessCount(prevMap => new Map(prevMap).set(key, value));
    };

    // Save guess count to localStorage when it changes
    useEffect(() => {
        localStorage.setItem("easyGuessCount", guessCount.get("easy"));
        localStorage.setItem("mediumGuessCount", guessCount.get("medium"));
        localStorage.setItem("hardGuessCount", guessCount.get("hard"));
    }, [guessCount]);

    // Example of how to update guess count, e.g., for debugging
    const handleIncrement = (difficulty) => {
        updateGuessCount(difficulty, (guessCount.get(difficulty) || 0) + 1);
    };

    return (
        <div>
            <button onClick={() => handleIncrement("easy")}>Increment Easy</button>
            <button onClick={() => handleIncrement("medium")}>Increment Medium</button>
            <button onClick={() => handleIncrement("hard")}>Increment Hard</button>
            <p>Easy Guess Count: {guessCount.get("easy")}</p>
            <p>Medium Guess Count: {guessCount.get("medium")}</p>
            <p>Hard Guess Count: {guessCount.get("hard")}</p>
        </div>
    );
};

export default Demo;