带有 React Lazy 的 TypeScript 出现承诺错误 [英] TypeScript with React Lazy getting promise error

问题描述

我正在使用与打字稿进行反应.我使用了一个更高阶的组件来检查用户是否通过身份验证.添加 hoc 后，我在路由中收到如下错误

I am using react with typescript.I have used a higher order component to check whether the user is authenticated or not. After adding the hoc i am getting the error in routes as below

 /home/nidhin/Documents/Nidhinbackup/F/iot-remsys-demotwo/remsys/src/navigation/routes.ts
TypeScript error in /home/nidhin/Documents/Nidhinbackup/F/iot-remsys-demotwo/remsys/src/navigation/routes.ts(7,36):
Type 'Promise<typeof import("/home/nidhin/Documents/Nidhinbackup/F/iot-remsys-demotwo/remsys/src/pages/Secure/Dashboard/index")>' is not assignable to type 'Promise<{ default: ComponentType<any>; }>'.
  Type 'typeof import("/home/nidhin/Documents/Nidhinbackup/F/iot-remsys-demotwo/remsys/src/pages/Secure/Dashboard/index")' is not assignable to type '{ default: ComponentType<any>; }'.
    Types of property 'default' are incompatible.
      Type '{}' is not assignable to type 'ComponentType<any>'.
        Type '{}' is not assignable to type 'FunctionComponent<any>'.
          Type '{}' provides no match for the signature '(props: any, context?: any): ReactElement<any, string | ((props: any) => ReactElement<any, string | ... | (new (props: any) => Component<any, any, any>)> | null) | (new (props: any) => Component<any, any, any>)> | null'.  TS2322

     5 | export const SignIn = React.lazy(() => import('pages/Public/SignIn'));
     6 | 
  >  7 | const Dashboard = React.lazy(() => import('pages/Secure/Dashboard'));
       |                                    ^
     8 | 
     9 | const routes = [{ path: '/dashboard', exact: true, name: 'Dashboard', component: Dashboard }];
    10 |

Routes.ts

   export const DefaultLayout = React.lazy(() => import('../containers/DefaultLayout'));

const Dashboard = React.lazy(() => import('../pages/Secure/Dashboard'));

const routes = [{ path: '/dashboard', exact: true, name: 'Dashboard', component: Dashboard }];

export default routes;

HOC:

interface HocProps {
  authUser: AuthToken;
  history?: any;
}


const withAuthentication = () => (Component: any) => {
  class WithAuthentication extends React.Component<HocProps, {}> {
    componentDidMount() {
      if (isEmpty(this.props.authUser)) {
        this.props.history.push('/signin');
      }
    }

    render() {      
      return this.props.authUser ? <Component {...this.props} /> : null;
    }
  }

  function mapStateToProps() {
    return {
      authUser: getAuthHeaders()
    };
  }

  return compose(
    withRouter,
    connect(mapStateToProps)
  )(WithAuthentication);
};

export default withAuthentication;

仪表板.tsx:

const Dashboard = () => <div>Dashboard</div>;

export default compose(
    withAuthentication(),
    connect(null)
)(Dashboard);

由于我是打字稿的新手，我无法弄清楚它是什么错误

Since i am new to typescript i couldn't able to figure out what error it is

推荐答案

我只能假设这个错误是因为 Dashboard 的默认导出类型为 {}(从 compose 函数返回)与 React 组件签名不匹配.

I can only assume this error is caused because the default export of Dashboard is of type {} (returned from the compose function) which doesn't match the React component signature.

尝试将 Dashboard 中的导出行更改为:

Try changing the export line in Dashboard to:

export default compose(
    withAuthentication(),
    connect(null)
)(Dashboard) as React.ComponentType<any>;

这会将导出强制转换为正确的类型，从而允许 React.lazy 工作.

This will forcefully cast the export to the correct type, allowing React.lazy to work.

这篇关于带有 React Lazy 的 TypeScript 出现承诺错误的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！