redux 在使用getInitialProps时,userAgent是否未在_app.tsx内定义?

nfs0ujit  于 2023-03-02  发布在  其他
关注(0)|答案(1)|浏览(115)

在以下代码行中,我将userAgent作为undefined获取:-

const userAgent = context.req?.headers['user-agent'] ?? '';

我得到的isMobileundefined,如下所示

我想在服务器端检测设备是移动的还是桌面设备。
目前我正在使用Next.jsTypescript
下面是我的完整源代码:-

MyApp.getInitialProps = wrapper.getInitialPageProps(
  (store) =>
    async (context: any): Promise<any> => {
      const userAgent = context.req?.headers['user-agent'] ?? '';
      const { isMobile } = getSelectorsByUserAgent(userAgent);
      store.dispatch(setDevice(isMobile));
      const initialProps = await App.getInitialProps(context);
      return { ...initialProps, userAgent, isMobile };
    }
);

export default wrapper.withRedux(MyApp);

下面是上述代码的简单版本,它也返回未定义的**userAgent

MyApp.getInitialProps = async ({ req }: NextPageContext) => {
  const userAgent = req
    ? req.headers['user-agent'] || ''
    : typeof window !== 'undefined'
    ? window.navigator.userAgent
    : '';
  return { userAgent };
};
jaql4c8m

jaql4c8m1#

以下是可行的答案:

MyApp.getInitialProps = async ({ ctx }: AppContext) => {
  const userAgent = ctx.req?.headers['user-agent'] ?? '';
  const isMobile = NextUserAgent.useUserAgent(userAgent).isMobile;
  return { isMobile };
};

相关问题