Taro Hooks useEffect 第二个参数设置为`[]`执行一次的语法实际上执行两次



  • Taro Hooks useEffect 第二个参数设置为[]执行一次的语法实际上执行两次

    https://github.com/NervJS/taro/issues/4493

    问题描述
    Taro Hooks useEffect 第二个参数设置为[]执行一次的语法实际上执行两次

    复现步骤

    1. 目标是使用mobx在组件间共享状态,新建store全局状态
    2. 希望执行useEffect一次,第二个参数设置为[],并在回调中修改store状态
    3. 结果会造成useEffect回调实际执行两次
    
    import Taro, { useEffect } from '@tarojs/taro'
    import { observer } from '@tarojs/mobx'
    import { View } from '@tarojs/components'
    import { observable } from 'mobx'
    
    const store = observable({ count: 0 })
    
    function Test() {
      const { count } = store
      useEffect(
        () => {
          console.log('useEffect')
          store.count = 1
        },
        []
      )
      return (
        <View>{count}</View>
      )
    }
    
    export default observer(Test)
    
    

    期望行为
    执行useEffect回调一次

      => useEffect
    

    报错信息
    执行useEffect回调两次

      => useEffect
      => useEffect
    

    系统信息

    Taro v1.3.18
    weapp
    package.json
      "mobx": "4.8.0"
    System:
      OS: Windows 10
    Binaries:
      Node: 10.15.3 - C:\Program Files\nodejs\node.EXE
      Yarn: 1.15.2 - C:\Users\EDZ\AppData\Roaming\npm\yarn.CMD
      npm: 6.4.1 - C:\Program Files\nodejs\npm.CMD
    

    补充信息

    • 实际上我使用React Hooks + mobx-react + mobx不会导致该问题
    • 可能是因为在回调中修改store会导致这个错误,不知道是否还有其他方式去修改全局store

    Taro + @tarojs/mobx依然存在该问题

    import Taro, { useEffect } from '@tarojs/taro'
    import { useLocalStore } from '@tarojs/mobx'
    import { View } from '@tarojs/components'
    
    function Test() {
      const store = useLocalStore(() => ({
        count: 0
      }))
      useEffect(
        () => {
          console.log('useEffect')
          store.count = 1
        },
        []
      )
      return (
        <View>{store.count}</View>
      )
    }
    
    export default Test
    

登录后回复