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

Question

我使用一个React应用程序，我使用钩子，本地存储和React，问题的上下文是我的本地存储在旧版本的一些代码更改后停止工作，在我决定摆脱重复代码后，一切都为我工作。本地存储停止工作我的旧代码看起来像这样在这里输入链接描述

这是我的代码现在的样子

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>
);
}

Answer 1

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

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

Answer 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>
);
}