Taro 1.3.9 微信小程序中 Context 相关api 异常。

[sheyunsi]

---

问题描述
https://juejin.im/post/5d259e27e51d4510a7328144#heading-4
代码是参照copy这篇文章中 useState + useContext 的示例代码。

export const CounterContext = createContext(null) 这一句创建了一个Context，并为之添加默认值 null，后面执行到 <CounterContext.Provider value={ { count, setCount } }> 这里的时候按理说应该会更新 Context 的 value，但是调试发现并未更新，导致后面在子组件中 const { count, setCount } = useContext(CounterContext)的时候直接取空报错了。

跳进 createContext 源码调试了一下，发现没有走进 createContext 中的 Provider 方法。

复现步骤
相关代码如下:

import Taro, { useState, createContext, useContext } from '@tarojs/taro'
import { Button, View } from "@tarojs/components";

export const CounterContext = createContext(null);

const Home = () => {
    const [count, setCount] = useState(0);
    return <CounterContext.Provider value={ { count, setCount } }>
        <ChildComponent/>
    </CounterContext.Provider>
};

const ChildComponent = () => {
    return (
        <View><Counter/></View>
    )
};

const Counter = () => {
    const { count, setCount } = useContext(CounterContext);
    return (
        <View>
            You clicked { count } times
            <Button onClick={ () => setCount(count + 1) }>Click me</Button>
        </View>
    )
};

export default Home

期望行为
期望 Context 的值能正常更新。

报错信息

VM10962:1 TypeError: Cannot read property 'count' of null
at Counter._createData (home.js:115)
at Object.createComponent (index.js:1941)
......

系统信息
Taro CLI 1.3.9 environment info:
System:
OS: macOS 10.14.5
Shell: 5.3 - /bin/zsh
Binaries:
Node: 12.4.0 - ~/.nvm/versions/node/v12.4.0/bin/node
Yarn: 1.16.0 - /usr/local/bin/yarn
npm: 6.9.0 - ~/.nvm/versions/node/v12.4.0/bin/npm
npmPackages:
@tarojs/components: 1.3.9 => 1.3.9
@tarojs/plugin-babel: 1.3.9 => 1.3.9
@tarojs/plugin-csso: 1.3.9 => 1.3.9
@tarojs/plugin-less: 1.3.9 => 1.3.9
@tarojs/plugin-uglifyjs: 1.3.9 => 1.3.9
@tarojs/router: 1.3.9 => 1.3.9
@tarojs/taro: 1.3.9 => 1.3.9
@tarojs/taro-alipay: 1.3.9 => 1.3.9
@tarojs/taro-h5: 1.3.9 => 1.3.9
@tarojs/taro-swan: 1.3.9 => 1.3.9
@tarojs/taro-tt: 1.3.9 => 1.3.9
@tarojs/taro-weapp: 1.3.9 => 1.3.9
@tarojs/webpack-runner: 1.3.9 => 1.3.9
eslint-config-taro: 1.3.9 => 1.3.9
eslint-plugin-taro: 1.3.9 => 1.3.9
nerv-devtools: ^1.4.0 => 1.4.3
nervjs: ^1.4.0 => 1.4.3

[taro-bot]

欢迎提交 Issue~

如果你提交的是 bug 报告，请务必遵循 Issue 模板的规范，尽量用简洁的语言描述你的问题，最好能提供一个稳定简单的复现。🙏🙏🙏

如果你的信息提供过于模糊或不足，或者已经其他 issue 已经存在相关内容，你的 issue 有可能会被关闭。

Good luck and happy coding~

[chm1n9]

遇到同样问题

[KevinRen]

问题描述
https://juejin.im/post/5d259e27e51d4510a7328144#heading-4
代码是参照copy这篇文章中 useState + useContext 的示例代码。

export const CounterContext = createContext(null) 这一句创建了一个Context，并为之添加默认值 null，后面执行到 <CounterContext.Provider value={ { count, setCount } }> 这里的时候按理说应该会更新 Context 的 value，但是调试发现并未更新，导致后面在子组件中 const { count, setCount } = useContext(CounterContext)的时候直接取空报错了。

跳进 createContext 源码调试了一下，发现没有走进 createContext 中的 Provider 方法。

复现步骤
相关代码如下:

import Taro, { useState, createContext, useContext } from '@tarojs/taro'
import { Button, View } from "@tarojs/components";

export const CounterContext = createContext(null);

const Home = () => {
    const [count, setCount] = useState(0);
    return <CounterContext.Provider value={ { count, setCount } }>
        <ChildComponent/>
    </CounterContext.Provider>
};

const ChildComponent = () => {
    return (
        <View><Counter/></View>
    )
};

const Counter = () => {
    const { count, setCount } = useContext(CounterContext);
    return (
        <View>
            You clicked { count } times
            <Button onClick={ () => setCount(count + 1) }>Click me</Button>
        </View>
    )
};

export default Home

期望行为
期望 Context 的值能正常更新。

报错信息

VM10962:1 TypeError: Cannot read property 'count' of null
at Counter._createData (home.js:115)
at Object.createComponent (index.js:1941)
......

系统信息
Taro CLI 1.3.9 environment info:
System:
OS: macOS 10.14.5
Shell: 5.3 - /bin/zsh
Binaries:
Node: 12.4.0 - ~/.nvm/versions/node/v12.4.0/bin/node
Yarn: 1.16.0 - /usr/local/bin/yarn
npm: 6.9.0 - ~/.nvm/versions/node/v12.4.0/bin/npm
npmPackages:
@tarojs/components: 1.3.9 => 1.3.9
@tarojs/plugin-babel: 1.3.9 => 1.3.9
@tarojs/plugin-csso: 1.3.9 => 1.3.9
@tarojs/plugin-less: 1.3.9 => 1.3.9
@tarojs/plugin-uglifyjs: 1.3.9 => 1.3.9
@tarojs/router: 1.3.9 => 1.3.9
@tarojs/taro: 1.3.9 => 1.3.9
@tarojs/taro-alipay: 1.3.9 => 1.3.9
@tarojs/taro-h5: 1.3.9 => 1.3.9
@tarojs/taro-swan: 1.3.9 => 1.3.9
@tarojs/taro-tt: 1.3.9 => 1.3.9
@tarojs/taro-weapp: 1.3.9 => 1.3.9
@tarojs/webpack-runner: 1.3.9 => 1.3.9
eslint-config-taro: 1.3.9 => 1.3.9
eslint-plugin-taro: 1.3.9 => 1.3.9
nerv-devtools: ^1.4.0 => 1.4.3
nervjs: ^1.4.0 => 1.4.3

创建时不能传null，应为：
export const CounterContext = createContext({}})

[sheyunsi]

@KevinRen
问题并不在创建时传什么，是在 <CounterContext.Provider value={}> 这里的value传进去的值，没有更新掉上面 createContext() 传进去的默认值。

[billwang1990]

同样遇到。

[shinena]

文档里动态 Context同样遇到，解决了吗？

[liuwei1025]

@KevinRen
问题并不在创建时传什么，是在 <CounterContext.Provider value={}> 这里的value传进去的值，没有更新掉上面 createContext() 传进去的默认值。

1.3.5版本也遇到这个问题啦，不过这个问题分为两种情况

1. 页面初始化时候因为解构null报错，这种只能是使用createContext({})解决
2. 页面在运行时，因为<Context.Provider></Context.Provider>在条件语句中执行，导致context未及时更新，我遇到的是这种情况，是将<Context.Provider></Context.Provider>移出条件语句解决