Dexiejs db.version().stores()不会在我的React应用程序中初始化表，但在Codesandbox和StackBlitz中运行良好

Question

我正在尝试用Dexie初始化一个indexedDB，它在StackBlitz和Codesandbox中似乎可以正常工作，但当我将代码移植到我的应用程序(repo)时就不行了。(与数据库相关的代码在考试历史分支中)。

在初始呈现时，在StackBlitz中检查调试器上的数据库时触发TypeError: Cannot read property 'mapToClass' of undefined，它将考试、答案、问题显示为表$$1。但是，在本地它是未定义的。

db.ts

import Dexie from "dexie";

import { Answer, Question, Exam } from "./model";

class ExamDatabase extends Dexie {
  public exams: Dexie.Table<Exam, number>;
  public questions: Dexie.Table<Question, number>;
  public answers: Dexie.Table<Answer, number>;

  constructor() {
    super("ExamDatabase");
    const db = this;
    db.version(1).stores({
      exams:
        "&gid, examNumber, examType, correct, currentQuestion, time, isPaused",
      questions: "&gid, examId, question, explanation, isMultipleChoice",
      answers: "&gid, questionId, type, choice, isSelected, isCorrect"
    });

    debugger
    db.exams.mapToClass(Exam);
    db.questions.mapToClass(Question);
    db.answers.mapToClass(Answer);
  }
}

export const db = new ExamDatabase();

model.ts

import cuid from "cuid";

export abstract class AbstractEntity {
  constructor(public gid?: string) {
    gid ? (this.gid = gid) : (this.gid = cuid());
  }
  equals(e1: AbstractEntity, e2: AbstractEntity) {
    return e1.gid === e2.gid;
  }
}

export class Answer extends AbstractEntity {
  constructor(
    public questionId: string,
    public choice: string,
    public isSelected: boolean,
    public isCorrect: boolean,
    gid?: string
  ) {
    super(gid);
  }
}

export class Question extends AbstractEntity {
  answers: Answer[];

  constructor(
    public examId: string,
    public question: string,
    public explanation: string,
    public isMultipleChoice: boolean,
    gid?: string
  ) {
    super(gid);

    Object.defineProperties(this, {
      answers: { value: [], enumerable: false, writable: true },
    });
  }
}

export class Exam extends AbstractEntity {
  questions: Question[];

  constructor(
    public examNumber: string,
    public examType: string,
    public correct: number,
    public currentQuestion: number,
    public time: string,
    public isPaused: boolean,
    gid?: string
  ) {
    super(gid);

    Object.defineProperties(this, {
      questions: { value: [], enumerable: false, writable: true },
    });
  }
}

日志记录'db‘

​

在StackBlitz中记录'db‘

​

Answer 1

修复方法似乎是在db构造函数中将mapToClass替换为表方法。

db.exams = db.table("exams");
db.questions = db.table("questions");
db.answers = db.table("answers");

但是，如果有人能解释为什么mapToClass可以在codesandbox环境中工作，而不是在本地服务器中工作，我将不胜感激。

Dexie版本3.0.2

Typescript版本3.9.7

和tsconfig文件：

{
  "compilerOptions": {
    "target": "es5",
    "lib": [
      "dom",
      "dom.iterable",
      "esnext"
    ],
    "allowJs": true,
    "skipLibCheck": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "strict": true,
    "strictPropertyInitialization": false,
    "forceConsistentCasingInFileNames": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,
    "jsx": "react"
  },
  "include": [
    "src"
  ]
}