React高阶函数中 怎么执行 onShow ？

[konayukis]

高阶组件中不能执行onShow , 这个怎么解决？

// 外层包裹权限
const Auth =
  (options = {}) =>
  (WrappedComponent: React.ComponentType) => {
    return function (props) {
      const { phone } = useSelector((state) => state.userInfo || {});

      if (!phone) {
        return "无手机号";
      }

      return <WrappedComponent {...props} />;
    };
  };

export default Auth;

const Page => () =>  {
  // 页面 Page中 useDidshow 不执行
  useDidShow(() => {
    console.log('useDidShow------------------');
  })
  return null
}

export default Auth()(Page)

[TheKonka]

子组件里面直接写 useDidShow 也是可以触发的吧

[konayukis]

只在页面组件才会触发 onShow 生命周期。子组件可以使用 Taro 内置的消息机制监听页面组件的 onShow() 生命周期

示例里面只有类组件的示例，函数式组件怎么实现呢，可以给个参考吗？

[ZakaryCode]

最新版本，新建项目默认就是函数式组件

[konayukis]

函数式组件怎么模拟useDidShow?

[TheKonka]

https://nervjs.github.io/taro/docs/hooks#usedidshow
直接从 taro 引入啊，还要啥模拟

[konayukis]

抱歉 之前问题描述错了。问题更新了，麻烦再看一下

[biorz]

import { useDidShow } from '@tarojs/taro'

export default function () {
  useDidShow(() => {
    console.log('didShow')
  })
}

[konayukis]

抱歉 我描述的不恰当

高阶组件中不能执行, 这个怎么解决？

// 外层包裹权限
const Auth =
  (options = {}) =>
  (WrappedComponent: React.ComponentType) => {
    return function (props) {
      const { phone } = useSelector((state) => state.userInfo || {});

      if (!phone) {
        return "无手机号";
      }

      return <WrappedComponent {...props} />;
    };
  };

export default Auth;

const Page => () =>  {
  // 页面 Page中 useDidshow 不执行
  useDidShow(() => {
    console.log('useDidShow------------------');
  })
  return null
}

export default Auth()(Page)