使用 React Context 单击时切换值答案

【问题标题】：Toggling the value when click using React Context使用 React Context 单击时切换值
【发布时间】：2020-10-23 23:43:07
【问题描述】：

我有一个切换按钮，单击时会更改主题，但单击切换按钮时无法更改主题。但是当我使用 react dev 工具手动将值从 true 更改为 false 时，主题也会相应更改。我正在尝试使用 Context API，但我不知道我错过了什么。非常感谢，提前。

//App.js

import Navbar from './components/Navbar'
import Booklist from './components/Booklist'
import ThemeContextProvider from './contexts/ThemeContext'
import ThemeToggle from './contexts/ThemeToggle';

function App() {
  return (
    <div className="App">
      <ThemeContextProvider>
        <Navbar/>
        <Booklist/>
        <ThemeToggle/>
      </ThemeContextProvider>
    </div>
  );
}

export default App;

//ThemeContext.js
import React,{useState, createContext} from 'react'
export const ThemeContext = createContext(null)

function ThemeContextProvider(props) {
 const [datastate, setDataState ] = useState({ 
    isLightTheme: true,
    light: { fontcolor: '#555', ui: '#ddd', bg: 'DarkSlateBlue' },
    dark: { fontcolor: 'white', ui: 'gray', bg: 'DarkSlateBlue'}
})
    
const changeTheme = () =>{
   setDataState({isLightTheme:!datastate.isLightTheme})
}
console.log(datastate.isLightTheme)
return (
        <div>
        <ThemeContext.Provider value={{...datastate, changeTheme:changeTheme}}>
                {props.children}
        </ThemeContext.Provider>
        </div>
    )
}

ThemeContextProvider.context = ThemeContext

export default ThemeContextProvider

//ThemeToggle.js
import React,{ useContext } from 'react'
import {ThemeContext} from '../contexts/ThemeContext'

const ThemeToggle = () => {
    const contextType = useContext(ThemeContext)
    const {changeTheme} = contextType
      return (
        <div>
            <button onClick={changeTheme}>Change Theme</button>
        </div>
    )
}

export default ThemeToggle


//Booklist.js
import React,{ useContext } from 'react'
import {ThemeContext} from '../contexts/ThemeContext'

function Booklist() {
    const contextType = useContext(ThemeContext)
    const{isLightTheme, light, dark} = contextType
    const theme = isLightTheme ? light : dark
    return (
        <div className='book-list' style={{color:theme.fontcolor,background:theme.bg}}>
            <ul>
            <li style={{background:theme.ui}}>Harry Porter</li>
            <li style={{background:theme.ui}}>The Alchemist</li>
            <li style={{background:theme.ui}}>The Book Thief</li>
          </ul>
        </div>
    )
}
export default Booklist

//Navbar.js
import React,{ useContext } from 'react'
import {ThemeContext} from '../contexts/ThemeContext'

function Navbar() {
    const contextType = useContext(ThemeContext)
    const{isLightTheme, light, dark} = contextType
    const theme = isLightTheme ? light : dark
    console.log(theme)
    return (
        <nav style={{background:theme.ui, color:theme.fontcolor}}>
          <h1>Context App</h1>
          <ul>
            <li>Home</li>
            <li>About</li>
            <li>Contact</li>
          </ul>
        </nav>
    )
}

export default Navbar

【问题讨论】：

标签： reactjs react-context

【解决方案1】：

经过一些尝试和错误，我需要做的就是改变

  const changeTheme = () =>{
   setDataState({sLightTheme:!datastate.isLightTheme})
  }

到

   const changeTheme = () =>{
   setDataState({...datastate,isLightTheme:!datastate.isLightTheme})      
}

它有效。

【讨论】：