如何在Gatsby中添加本地存储以保持暗模式主题

Question

我已经尝试了一切方法来添加本地存储来持久化主题。关于如何使用现有代码实现的任何想法？第一次渲染时，我得到了冲突主题的混合。我尝试在设置主题时实现本地存储。

const setTheme = type => {
  localStorage.setItem("theme", setState({ ...state, theme: type === "dark" ? theme.light : theme.dark })
}
    
const initState = {
  theme: localStorage.getItem("theme"),
  setTheme: setTheme,
}
    
const [state, setState] = useState(initState)

他们的提供者。js

    
export const ThemeContext = React.createContext({
      theme: {
      
      },
      setTheme: () => {},
    })
    
export const ThemeContextProvider = props => {
      const theme = {
        light: {
          
        },
        dark: {
         
        },
      }
    
      const setTheme = type => {
        setState({ ...state, theme: type === "dark" ? theme.light : theme.dark })
      }
    
      const initState = {
        theme: theme.light,
        setTheme: setTheme,
      }
    
      const [state, setState] = useState(initState)
    
      return (
        <ThemeContext.Provider value={state}>
          {props.children}
        </ThemeContext.Provider>
      )
    } 

Answer 1

这一行对我来说没有意义：

const setTheme = type => {
  localStorage.setItem("theme", setState({ ...state, theme: type === "dark" ? theme.light : theme.dark })
}

您想在localstore中设置一个项目，但却在setItem函数中设置React状态？

有两点需要注意：

• 不要在localStorage中设置React状态。设置项功能

这是正确的：

const setTheme = type => {
  localStorage.setItem("theme", state.theme }); // only save the theme value "dark" or "light" as a string
}

您需要触发设置状态根据在localStore或在初始状态中的值。为此使用usimplified。这个答案告诉你怎么做。