React - 更改代码后本地存储停止工作答案

【问题标题】：React - Local storage stopped working after changing codeReact - 更改代码后本地存储停止工作
【发布时间】：2021-05-21 17:57:40
【问题描述】：

我使用了一个 React 应用程序，其中我使用了钩子、本地存储和 React，问题的背景是我的本地存储在旧版本中的一些代码更改后停止工作，在我决定摆脱后一切都对我有用重复的代码。本地存储停止工作我的旧代码看起来像这样enter link description here

这就是我的代码现在的样子

export const CounterContext = createContext([]);

export default function ThemeDoc(props) {

    const [SideBarTheme, SetSideBarTheme] = useState(localStorage.getItem("SideBarKey"));
    const [SideBarBackground, SetSideBarBackground] = useState(localStorage.getItem("BgKey"));

    // SideBar Wallpapers
    const [SideBarBackgrounds,] = useState([
        {
            SideBarWallpaper: Bg,
        },
        {
            SideBarWallpaper: Pink,
        },
        {
            SideBarWallpaper: Anapa,
        },
    ])

    // Gradient Themes
    const [GradientThemes,] = useState([
        {
            SideBar: "linear-gradient(180deg, rgba(66, 116, 131, 1) 0%, rgba(69, 75, 88, 1) 100%)",
            PageContent: "linear-gradient(180deg,rgba(65,116,130,1) 0%, #353a4f 80%)",
            TextColor: "#dfdfdfb3",
            RadioButtonBackground: "linear-gradient(40deg, #51adff, #10f4a0)",
            RadioButtonBorderColor: "1px solid #33b7de",
        },
        {
            SideBar: "linear-gradient(180deg, rgb(146 93 116) 0%, rgb(71 75 88) 100%)",
            PageContent: "linear-gradient(180deg, rgb(147 99 123) 0%, rgb(55 58 80) 80%)",
            TextColor: "#dfdfdfb3",
            RadioButtonBackground: "linear-gradient(120deg,#ffb2b2 0,#f68084 100%)",
            RadioButtonBorderColor: "1px solid #ff8185fa",
        },
        {
            SideBar: "linear-gradient(180deg, rgb(96 110 150) 0%, rgb(69 75 88) 100%)",
            PageContent: "linear-gradient(180deg, rgb(94 110 149) 0%, rgb(53 58 80) 80%)",
            TextColor: "#dfdfdfb3",
            RadioButtonBackground: "linear-gradient(40deg, rgb(48 137 198), rgb(161 186 255))",
            RadioButtonBorderColor: "1px solid #818db0",
        },
    ])

    useEffect(() => {
        localStorage.setItem('SideBarKey', JSON.stringify(SideBarTheme));
        localStorage.setItem("BgKey", SideBarBackground);
    })

    const ChangeSideBarWallpaper = (SideBarWallpaper) => {
        localStorage.setItem('BgKey', SideBarWallpaper);
        SetSideBarTheme(localStorage.removeItem("SideBarKey"));
        SetSideBarBackground(SideBarWallpaper);
    }

    const SideBarPageContent = (PageContent, SideBar, TextColor) => {
        localStorage.setItem('SideBarKey', JSON.stringify({PageContent, SideBar, TextColor}));
        SetSideBarTheme({PageContent, SideBar, TextColor});
    }

    const gradientList = GradientThemes.map((gradTheme, index) => {
        return (
            <RadioButton
                key={index}
                style={{background: gradTheme.RadioButtonBackground, border: gradTheme.RadioButtonBorderColor}}
                className={"RadioButton_ThemeDoc"}
                name="group1"
                value="first"
                onChange={() => SideBarPageContent(gradTheme.PageContent, gradTheme.SideBar, gradTheme.TextColor)}
            />
        );
    })

    const SideBarWallpaperList = SideBarBackgrounds.map((theme, index) => {
        return (
            <img key={index} width={"52"} height={"42"} src={theme.SideBarWallpaper} className={"SideBar_Appearance_Select_Icon"}
                 onClick={() => ChangeSideBarWallpaper(theme.SideBarWallpaper)} alt={"Select Theme"} />
        );
    })

    return (
        <div className="page-wrapper chiller-theme toggled">
            <CounterContext.Provider value={{
                SideBarValue: [SideBarTheme, SetSideBarTheme],
                SideBarWallpaperValue: [SideBarBackground, SetSideBarBackground],
            }}>
                <SideBar gradientList={gradientList} SideBarWallpaperList={SideBarWallpaperList} {...props} />
                <PageContent {...props} />
            </CounterContext.Provider>
        </div>
    );
}

【问题讨论】：

标签： javascript reactjs react-hooks local-storage store

【解决方案1】：

当您最初设置状态时，没有空检查，因为这可能会导致问题。

如果您清理浏览器缓存，那么您在本地存储或任何其他浏览器中都找不到密钥。

【讨论】：

那我该怎么办？
在你设置和获取的地方验证生命周期，检查本地存储值是否正确获取和设置

【解决方案2】：

export const CounterContext = createContext([]);

export default function ThemeDoc(props) {

    const [SideBarTheme, SetSideBarTheme] = useState(JSON.parse(localStorage.getItem("SideBarKey")));
    const [SideBarBackground, SetSideBarBackground] = useState(localStorage.getItem("BgKey"));

    // SideBar Wallpapers
    const [SideBarBackgrounds,] = useState([
        {
            SideBarWallpaper: Bg,
        },
        {
            SideBarWallpaper: Pink,
        },
        {
            SideBarWallpaper: Anapa,
        },
    ])

    // Gradient Themes
    const [GradientThemes,] = useState([
        {
            SideBar: "linear-gradient(180deg, rgba(66, 116, 131, 1) 0%, rgba(69, 75, 88, 1) 100%)",
            PageContent: "linear-gradient(180deg,rgba(65,116,130,1) 0%, #353a4f 80%)",
            TextColor: "#dfdfdfb3",
            RadioButtonBackground: "linear-gradient(40deg, #51adff, #10f4a0)",
            RadioButtonBorderColor: "1px solid #33b7de",
        },
        {
            SideBar: "linear-gradient(180deg, rgb(146 93 116) 0%, rgb(71 75 88) 100%)",
            PageContent: "linear-gradient(180deg, rgb(147 99 123) 0%, rgb(55 58 80) 80%)",
            TextColor: "#dfdfdfb3",
            RadioButtonBackground: "linear-gradient(120deg,#ffb2b2 0,#f68084 100%)",
            RadioButtonBorderColor: "1px solid #ff8185fa",
        },
        {
            SideBar: "linear-gradient(180deg, rgb(96 110 150) 0%, rgb(69 75 88) 100%)",
            PageContent: "linear-gradient(180deg, rgb(94 110 149) 0%, rgb(53 58 80) 80%)",
            TextColor: "#dfdfdfb3",
            RadioButtonBackground: "linear-gradient(40deg, rgb(48 137 198), rgb(161 186 255))",
            RadioButtonBorderColor: "1px solid #818db0",
        },
    ])

    useEffect(() => {
        localStorage.setItem('SideBarKey', JSON.stringify(SideBarTheme));
        localStorage.setItem("BgKey", SideBarBackground);
    })

    const ChangeSideBarWallpaper = (SideBarWallpaper) => {
        localStorage.setItem('BgKey', SideBarWallpaper);
        SetSideBarTheme(localStorage.removeItem("SideBarKey"));
        SetSideBarBackground(SideBarWallpaper);
    }

    const SideBarPageContent = (gradTheme) => {
        localStorage.setItem('SideBarKey', JSON.stringify(gradTheme));
        SetSideBarTheme(gradTheme);
    }

    const gradientList = GradientThemes.map((gradTheme, index) => {
        return (
            <RadioButton
                key={index}
                style={{background: gradTheme.RadioButtonBackground, border: gradTheme.RadioButtonBorderColor}}
                className={"RadioButton_ThemeDoc"}
                name="group1"
                value="first"
                onChange={() => SideBarPageContent(gradTheme)}
            />
        );
    })

    const SideBarWallpaperList = SideBarBackgrounds.map((theme, index) => {
        return (
            <img key={index} width={"52"} height={"42"} src={theme.SideBarWallpaper} className={"SideBar_Appearance_Select_Icon"}
                 onClick={() => ChangeSideBarWallpaper(theme.SideBarWallpaper)} alt={"Select Theme"} />
        );
    })

    return (
        <div className="page-wrapper chiller-theme toggled">
            <CounterContext.Provider value={{
                SideBarValue: [SideBarTheme, SetSideBarTheme],
                SideBarWallpaperValue: [SideBarBackground, SetSideBarBackground],
            }}>
                <SideBar gradientList={gradientList} SideBarWallpaperList={SideBarWallpaperList} {...props} />
                <PageContent {...props} />
            </CounterContext.Provider>
        </div>
    );
}

【讨论】：