如何使用 axios 将字符串映射到 NextJS 中的枚举

Question

我正在从数据库加载数据，如下所示：

export const getBook = (id: string) =>
  axios
    .get<Book>(
      `${process.env.NEXT_PUBLIC_API_URL}/book/${id}`
    )
    .then((res: AxiosResponse<Book>) => res.data);

哪里

export type Book = {
  type: BookType;
};

export enum BookType {
  COURSEBOOK = 'Podręcznik',
  WORKBOOK = 'Zbiór zadań',
}

不幸的是，当从数据库加载数据时，

type

属性是

COURSEBOOK

（

string

）而不是相应的

CORSEBOOK

enum

值。因此，当我使用

book.type

时，我会得到

COURSEBOOK

而不是

Podręcznik

。如何解决这个问题？

Answer 1

TypeScript 不会自动执行枚举值与其字符串表示形式之间的转换。当您从数据库获取数据时，枚举值将存储为字符串。

当 TypeScript 将此字符串值分配给枚举类型的变量或属性时，它不会自动将其转换为相应的枚举值。

您需要创建一个函数来将字符串值映射到其相应的枚举值。

const mapStringToBookType = (type: string): BookType => {
  switch (type) {
    case 'Podręcznik':
      return BookType.COURSEBOOK;
    case 'Zbiór zadań':
      return BookType.WORKBOOK;
    default:
      throw new Error(`Unknown book type: ${type}`);
  }
};

// getBook function
export const getBook = (id: string) =>
  axios
    .get<Book>(`${process.env.NEXT_PUBLIC_API_URL}/book/${id}`)
    .then((res: AxiosResponse<Book>) => {
      // Map the string value to the enum value before returning
      return {
        ...res.data,
        type: mapStringToBookType(res.data.type),
      };
    });