如何在函数式组件使用mobx



  • // github demo 拉下来报错
    function Header() {
        const store = useLocalStore(() => ({
            counter: 0,
            increment() {
                store.counter++
            },
            decrement() {
                store.counter--
            },
            incrementAsync() {
                setTimeout(() => store.counter++, 1000)
            }
        }))
    
        const { counter, increment, decrement, incrementAsync } = store;
        return (
            <View>
                <Button onClick={increment}>+</Button>
                <Button onClick={decrement}>-</Button>
                <Button onClick={incrementAsync}>Add Async</Button>
                <Text>{counter}</Text>
            </View>
        )
    }
    
    export default observer(Header)
    

    https://sm.ms/image/ADvSfBqpsamh7NY
    报错信息

    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)
    

登录后回复