关于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

Dell 2019-04-02 23:56:51

这个问题同学你是不是重复提问了两次

• 提问者 李行知 #1

  是一个现象的两个问题，那个问题后来的时候我在官网找到了示例，如果使用class组件是ok的，但是后来我切换成了hooks的写法就有问题了。
  https://codesandbox.io/s/w2jmj7vv38
  后来自己就做了一个codepen的链接

• Dell 回复 提问者 李行知 #2

  其实原因很简单，每次render的时候，你这么写，theme都会在渲染前被重置成red，所以不能用这个语法，必须用函数回调的方法