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

希望這可以幫助 ！