Typescript enum map return lookup function-CodePudding

I have a function that maps a lookup class into a usable array for my React project. I was able to get the function to work, but right now it is looping through the enum twice and returning undefined for the first iteration.

Enum, interface and lookup class:

export interface CustomerSupportTileModel {
  title: string;
  iconClass: string;
  link: AppRoute;
}

export enum CustomerSupportType {
  Ordering = 0,
  Finances = 1,
  Account = 2,
  ListManagement = 3,
}

export class CustomerSupportTilesLookup {
  public static CustomerSupportTiles: { [key in CustomerSupportType]: CustomerSupportTileModel } = {
    [CustomerSupportType.Account]: {
      title: 'Account',
      iconClass: 'fa-user',
      link: AppRoutes[RouteName.CustomerSupport], //change when route is added
    },
    [CustomerSupportType.Finances]: {
      title: 'Finances',
      iconClass: 'fa-file-invoice-dollar',
      link: AppRoutes[RouteName.CustomerSupport], //change when route is added
    },
    [CustomerSupportType.Ordering]: {
      title: 'Ordering',
      iconClass: 'fa-shopping-cart',
      link: AppRoutes[RouteName.CustomerSupport], //change when route is added
    },
    [CustomerSupportType.ListManagement]: {
      title: 'List Management',
      iconClass: 'fa-list-alt',
      link: AppRoutes[RouteName.CustomerSupport], //change when route is added
    },
  };
}

Helper function:

export const getCustomerSupportTiles = (): CustomerSupportTileModel[] =>
  (Object.keys(CustomerSupportType) as Array<keyof typeof CustomerSupportType>).map(
    (key: keyof typeof CustomerSupportType) => {
      return CustomerSupportTilesLookup.CustomerSupportTiles[CustomerSupportType[key]];
    }
  );

This works but is returning 8 elements, 4 undefined then 4 correct objects. Why is it looping twice?

CodePudding user response：

It is probably looping twice (re-renders) due to some side-effect that happens inside your component. Could you please provide a React Component where this is used?

Also, I advise you not to use Class Static Members at all and use something like this:

export const CustomerSupportTiles: Record<
  CustomerSupportType,
  CustomerSupportTileModel
> = {
  [CustomerSupportType.Account]: {
    title: 'Account',
    iconClass: 'fa-user',
    link: AppRoutes[RouteName.CustomerSupport], //change when route is added
  },
  [CustomerSupportType.Finances]: {
    title: 'Finances',
    iconClass: 'fa-file-invoice-dollar',
    link: AppRoutes[RouteName.CustomerSupport], //change when route is added
  },
  [CustomerSupportType.Ordering]: {
    title: 'Ordering',
    iconClass: 'fa-shopping-cart',
    link: AppRoutes[RouteName.CustomerSupport], //change when route is added
  },
  [CustomerSupportType.ListManagement]: {
    title: 'List Management',
    iconClass: 'fa-list-alt',
    link: AppRoutes[RouteName.CustomerSupport], //change when route is added
  },
};

Note the Record utility type for a cleaner type description. And for the helper function:

export const getCustomerSupportTiles = (): CustomerSupportTileModel[] =>
  (Object.keys(CustomerSupportType) as Array<keyof typeof CustomerSupportType>).map(
    (key: keyof typeof CustomerSupportType) => {
      return CustomerSupportTiles[CustomerSupportType[key]];
    }
  );

or just iterating over the CustomerSupportTiles object items could work.

Another possible approach is to use the Object.values(CustomerSupportTiles) to return all values from that object.