我开始在React中使用上下文api，因此我决定创建一个简单的主题上下文。现在，如果我进入我的React DevTools并将boolean isLightTheme更改为false，它可以工作，但是当我尝试将此功能附加到按钮上时，我会不断收到错误消息。有人可以帮我吗？
主题语境
import React, { useState, createContext } from 'react'
export const ThemeContext = createContext()
export const ThemeContextProvider = ({ children }) => {
const [state, setState] = useState({
isLightTheme: true,
light: { syntax: '#555', ui: '#ddd', bg: '#eee' },
dark: { syntax: '#ddd', ui: '#333', bg: '#555' }
})
const toggleTheme = () => {
setState({ isLightTheme: !state.isLightTheme})
}
return (
<ThemeContext.Provider value={{...state, toggleTheme}}>
{children}
</ThemeContext.Provider>
)
}
import React, { useContext } from 'react'
import { ThemeContext } from '../context/ThemeContext'
export const ThemeToggler = () => {
const themeContext = useContext(ThemeContext)
const { toggleTheme } = themeContext
return (
<button onClick={toggleTheme}>Change Theme</button>
)
}
的useState像钩API不更新状态的选择性片setState一样。它将覆盖整个状态。在这里，当您切换主题时，新状态仅{ isLightTheme: !state.isLightTheme}没有明暗键。您只需要通过更新该状态来处理此问题。这应该工作：
import React, { useState, createContext } from 'react'
export const ThemeContext = createContext()
export const ThemeContextProvider = ({ children }) => {
const [state, setState] = useState({
isLightTheme: true,
light: { syntax: '#555', ui: '#ddd', bg: '#eee' },
dark: { syntax: '#ddd', ui: '#333', bg: '#555' }
})
const toggleTheme = () => {
//preserve the remaining state also
setState({...state,isLightTheme: !state.isLightTheme})
}
return (
<ThemeContext.Provider value={{...state, toggleTheme}}>
{children}
</ThemeContext.Provider>
)
}
希望这可以帮助 ！
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句