函数式组件使用mobx 渲染微信小程序失败

[PresByter2015]

相关平台

微信小程序

小程序基础库: 2.12.1
使用框架: Nerv

复现步骤

function Log() {
    const [count, setCount] = useState(0);
    return (
        <View>
            Count: {count}
            <Button onClick={() => setCount(0)}>Reset</Button>
            <Button onClick={() => setCount(prevCount => prevCount   1)}> </Button>
            <Button onClick={() => setCount(prevCount => prevCount - 1)}>-</Button>
        </View>
    );
}
export default observer(Log);

小程序上报错

TypeError: react__WEBPACK_IMPORTED_MODULE_1__.d.useDebugValue is not a function
    at useObserver (vendors.js:978)
    at Component.wrappedComponent (vendors.js:1043)
    at Component.c.render (vendors.js:8645)
    at vendors.js:8694
    at errorCatcher (vendors.js:8582)
    at renderComponent (vendors.js:8693)
    at mountComponent (vendors.js:8666)
    at ComponentWrapper.init (vendors.js:9089)
    at createElement (vendors.js:8313)
    at mountVNode (vendors.js:8628)

期望结果

如何在taro函数式组件中正确使用mobx

实际结果

正确渲染

环境信息

 Taro CLI 3.0.7 environment info:
    System:
      OS: macOS 10.15
      Shell: 5.7.1 - /bin/zsh
    Binaries:
      Node: 12.16.3 - /usr/local/bin/node
      Yarn: 1.22.4 - /usr/local/bin/yarn
      npm: 6.9.0 - /usr/local/bin/npm
    npmPackages:
      @tarojs/components: 3.0.7 => 3.0.7 
      @tarojs/mini-runner: 3.0.7 => 3.0.7 
      @tarojs/runtime: 3.0.7 => 3.0.7 
      @tarojs/taro: 3.0.7 => 3.0.7 
      @tarojs/webpack-runner: 3.0.7 => 3.0.7 
      babel-preset-taro: 3.0.7 => 3.0.7 
      eslint-config-taro: 3.0.7 => 3.0.7 
      nervjs: ^1.5.0 => 1.5.7 

[PresByter2015]

VM240:1 [MobX] You haven't configured observer batching which might result in unexpected behavior in some cases. See more at https://github.com/mobxjs/mobx-react-lite/#observer-batching
console.warn @ VM240:1
useObserver @ vendors.js:941
wrappedComponent @ vendors.js:1043
c.render @ vendors.js:8645
(anonymous) @ vendors.js:8694
errorCatcher @ vendors.js:8582
renderComponent @ vendors.js:8693
mountComponent @ vendors.js:8666
init @ vendors.js:9089
createElement @ vendors.js:8313
mountVNode @ vendors.js:8628
mountComponent @ vendors.js:8672
init @ vendors.js:9089
createElement @ vendors.js:8313
mountVNode @ vendors.js:8628
mountComponent @ vendors.js:8672
init @ vendors.js:9089
createElement @ vendors.js:8313
mountChild @ vendors.js:8372
mountVNode$1 @ vendors.js:8362
createElement @ vendors.js:8318
mountVNode @ vendors.js:8628
mountComponent @ vendors.js:8672
init @ vendors.js:9089
createElement @ vendors.js:8313
(anonymous) @ vendors.js:8331
createElement @ vendors.js:8330
patch @ vendors.js:7839
updateComponent @ vendors.js:8800
reRenderComponent @ vendors.js:8745
update @ vendors.js:9096
patch @ vendors.js:7826
updateComponent @ vendors.js:8800
reRenderComponent @ vendors.js:8745
update @ vendors.js:9096
patch @ vendors.js:7826
updateComponent @ vendors.js:8800
reRenderComponent @ vendors.js:8745
update @ vendors.js:9096
patch @ vendors.js:7826
updateComponent @ vendors.js:8800
forceUpdate @ vendors.js:8956
mount @ runtime.esm.js:3159
mount @ runtime.esm.js:3189
onLoad @ runtime.esm.js:2852
(anonymous) @ VM246 WAService.js:2
p.__callPageLifeTime__ @ VM246 WAService.js:2
jt @ VM246 WAService.js:2
(anonymous) @ VM246 WAService.js:2
Mt @ VM246 WAService.js:2
(anonymous) @ VM246 WAService.js:2
(anonymous) @ VM246 WAService.js:2
i.emit @ VM246 WAService.js:2
emit @ VM246 WAService.js:2
(anonymous) @ VM246 WAService.js:2
i.emit @ VM246 WAService.js:2
emit @ VM246 WAService.js:2
(anonymous) @ VM246 WAService.js:2
(anonymous) @ VM246 WAService.js:2
n @ VM244 asdebug.js:1
(anonymous) @ VM244 asdebug.js:1
(anonymous) @ VM244 asdebug.js:1
_ws.onmessage @ VM244 asdebug.js:1
Show 33 more frames
VM240:1 TypeError: react__WEBPACK_IMPORTED_MODULE_1__.d.useDebugValue is not a function
    at useObserver (vendors.js:978)
    at Component.wrappedComponent (vendors.js:1043)
    at Component.c.render (vendors.js:8645)
    at vendors.js:8694
    at errorCatcher (vendors.js:8582)
    at renderComponent (vendors.js:8693)
    at mountComponent (vendors.js:8666)
    at ComponentWrapper.init (vendors.js:9089)
    at createElement (vendors.js:8313)
    at mountVNode (vendors.js:8628)

如上报错，，如何在函数式组件中使用mobx

[rottenpen]

你的代码真的这样写的吗？

[PresByter2015]

你的代码真的这样写的吗？

`
function Index() {
const store = useLocalStore(() => ({
counter: 0,
increment() {
store.counter++
},
decrement() {
store.counter--
},
incrementAsync() {
setTimeout(() => store.counter++, 1000)
}
}))

const { counter, increment, decrement, incrementAsync } = store;
return (

+
-
Add Async
{counter}

)
}

export default observer(Index)
`
这样 也报错啊

[PresByter2015]

引入是 NervJS，而不是react。

[Chen-jj]

Nerv 没有实现 useDebugValue 这个 hook，在使用函数式组件时 mobx 会调用它。所以 Nerv + mobx 目前只能使用 Class 组件。