Javascript 在React中使用上下文API

我开始在React中使用上下文api，我决定创建一个简单的主题上下文。现在，如果我转到React开发工具并将布尔isLightTheme更改为false，它会工作，但当我尝试将此功能附加到按钮时，我会不断出错。saomeone能帮我吗

主题语境

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，{useState，createContext}来自“React”
export const ThemeContext=createContext（）
导出常量ThemeContextProvider=（{children}）=>{
常量[状态，设置状态]=使用状态({
isLightTheme：真的，
灯光：{语法：'#555'，用户界面：'#ddd'，背景：'#eee'}，
深色：{语法：'#ddd'，用户界面：'#333'，背景：'#555'}
})
常量切换主题=（）=>{
setState（{isLightTheme:！state.isLightTheme}）
}
返回(
{儿童}
)
}

import React，{useContext}来自“React”
从“../context/ThemeContext”导入{ThemeContext}
导出常量主题选择器=（）=>{
常量themeContext=useContext（themeContext）
const{toggleTheme}=ThemeSecontext
返回(
改变主题
)
}
useState
hooks 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>
    )
}

import React，{useState，createContext}来自“React”
export const ThemeContext=createContext（）
导出常量ThemeContextProvider=（{children}）=>{
常量[状态，设置状态]=使用状态({
isLightTheme：真的，
灯光：{语法：'#555'，用户界面：'#ddd'，背景：'#eee'}，
深色：{语法：'#ddd'，用户界面：'#333'，背景：'#555'}
})
常量切换主题=（）=>{
//还保留剩余状态
setState（{…state，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>
    )
}