在 React 中使用上下文 API答案

【问题标题】：Using the context API in React在 React 中使用上下文 API
【发布时间】：2020-06-14 19:30:23
【问题描述】：

我开始在 React 中使用上下文 api，我决定制作一个简单的主题上下文。现在，如果我转到我的 React DevTools 并将布尔值 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>
    )
}

【问题讨论】：

标签： javascript reactjs react-context

【解决方案1】：

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

希望这会有所帮助！

【讨论】：