关于context跟hooks的一个问题

来源：5-6 Router原理及React-router

李行知

2019-01-15

#提问#
关于hooks跟context一起使用的代码导致的一个问题。
我希望在子组件中调用方法来改变context中的值，一开始是通过props来进行传函数进行改变。
代码类似下面这样

  const [is,setIs]=useState(false)
  const changeTheme = () => {
    console.log(is);
    setIs(!is)
    console.log(theme.theme.color);
    if(theme.theme.color==='block'){
      setTheme(themeDark)
    }else{
      setTheme(themeLight)
    }
    // setTheme((pre) => {
    //   if (pre.theme.color === 'black') {
    //     return themeDark
    //   }
    //   else {
    //     return themeLight
    //   }
    // })
  }
  const themeLight = {
    theme: {
      color: 'black',
      background: 'white',
    },
    changeTheme
  }

  const themeDark = {
    theme: {
      color: 'white',
      background: 'black',
    },
    changeTheme
  }
  const [theme, setTheme] = useState(themeLight)

app.js

              <Header changeTheme={changeTheme}/>

Header.js

          <div onClick={()=>props.changeTheme()} style={context.theme}>主题</div>

这样是可以正确的
false true false true的输出的
但是无法改变color
而如果我使用了被注释的代码，则可以显示值
如果我在Header.js中
使用
<div onClick={()=>context.changeTheme()} style={context.theme}>主题

这样的代码则clg is 一直为false
求解

写回答

2回答