关于context跟hooks的一个问题

Question

#提问#
关于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
求解

Answer 1

Rosen 2019-01-18 21:10:47

发现两个问题

1. 这里应该是theme.color吧，不是你写的theme.theme
    

2. theme对象里放了changeTheme方法有些奇怪，没次改变状态的时候还要重置下方法？不应该是新版本的新用法吧？

• 提问者 李行知 #1

  因为以前的代码设计的东西挺多的，就稍微改变了一些
  这个改变方式是参考了react官网在· Examples 中给出的例子进行的修改
  https://reactjs.org/docs/context.html#contextconsumer
  不过他用的是class，传递的是this 如果使用class跟this的写法，就不会有问题

• 提问者 李行知 #2

  才发现。。。因为以前的时候写的东西比较的杂，所以简化了一下代码，结果写错了一步。。。可是这个样子，那么他可以变化颜色，但是只能变化一次

• Rosen 回复 提问者 李行知 #3

  我觉得把方法放在state里比较奇怪，就是上面第2条里说的那个问题

点开查看后面1条评论

Answer 2

Rosen 2019-01-17 20:50:09

<Header changeTheme={changeTheme}/> 这里的changeTheme从哪来的？改变主题的话，应该要有setState，或者调用父级方法的操作。看这坨代码有点乱，你再捋捋，不行打包发我看看

• 提问者 李行知 #1

  https://codesandbox.io/s/r4jvk6nz6m
  老师看下这个。我把代码整理了一下