React - 如何将两个值而不是一个值传递给钩子

Question

我有两个钩子SideBarTneme和GradientThemes在第二个钩子里面有不同属性的对象，我需要得到两个属性（SideBarThemePage和SideBarThemeName）并把它放在SideBarTheme里面，因为我使用上下文我在另一个组件中获取这些值，但问题是我得到一个名为“Test”的值而不是两个值

如您所知，我需要为此获取两个值

SideBarThemePage: "Test", 和 SideBarThemeName: "AquaGradient",

我在其他组件中获取这些值以满足我的需要，这是我的代码

export default function ThemeDoc(props) {

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

    // Gradient Themes
    const [GradientThemes,] = useState(
        [
            {
                SideBarThemePage: "Test",
                SideBarThemeName: "AquaGradient",
                RadioButtonStyle: {
                    RadioButtonColor: "linear-gradient(40deg, #51adff, #05ffa3)",
                    RadioButtonBorder: "1px solid #33b7de",
                }
            },
            {
                SideBarThemePage: "Test",
                SideBarThemeName: "RedGradient",
                RadioButtonStyle: {
                    RadioButtonColor: "linear-gradient(120deg,#ffb2b2 0,#f68084 100%)",
                    RadioButtonBorder: "1px solid #ff8185fa",
                },
            },
        ]
    )

    useEffect(() => {
        localStorage.setItem("SideBarKey", SideBarTheme);
    })

    const SideBarPageContent = (SideBarThemePage, SideBarThemeName) => {
        localStorage.setItem(SideBarThemePage, 'SideBarKey');
        localStorage.setItem(SideBarThemeName, 'SideBarKey');

        SetSideBarTheme(SideBarThemePage);
        SetSideBarTheme(SideBarThemeName);
    }

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

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

Answer 1

您正在通过这样做覆盖这些值：

localStorage.setItem(SideBarThemePage, 'SideBarKey');
localStorage.setItem(SideBarThemeName, 'SideBarKey');

它具有相同的键'SideBarKey'

你可以这样做：

localStorage.setItem(JSON.stringify({SideBarThemePage, SideBarThemeName}), 'SideBarKey');

然后得到它：

const items = JSON.parse(localStorage.getItem('SideBarKey'));
items?.SideBarThemePage // make sure to check if the value exists

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