在 React 中使用上下文 API

Question

我开始在 React 中使用上下文 api，我决定制作一个简单的主题上下文。 现在，如果我将 go 更改为我的 React DevTools 并将 boolean 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, { 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>
    )
}

Answer 1

useState挂钩 API 不会像setState那样更新 state 的选择性片段。 它将覆盖整个 state。 在这里切换主题时，新的 state 只有{ isLightTheme: .state.isLightTheme}没有明暗键。 您只需要更新 state 即可处理此问题。 这应该有效：

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

希望这可以帮助 ！