0

所以我试图调试为什么我的问题数组没有正确填充到我的 mobx-state-tree questions-store 中。getQuestions 操作中的 yield 语句之后没有任何内容运行。

export const QuestionStoreModel = types
  .model("QuestionStore")
  .props({
    questions: types.optional(types.array(QuestionModel), [])
  })
  .extend(withEnvironment)
  .views((self) => ({})) // eslint-disable-line @typescript-eslint/no-unused-vars
  .actions((self) => ({
    saveQuestions: (questionSnapshots: QuestionSnapshot[]) => {
      console.tron.log("SAVE QUESTIONS");
      console.tron.log({ questionSnapshots });
      const questionModels: Question[] = questionSnapshots.map(c => QuestionModel.create(c));
      self.questions.replace(questionModels); // Replace the existing data with the new data
    }
  })) 
  .actions((self) => ({
    getQuestions: flow(function*() {
      console.tron.log("GET QUESTIONS");
      const result: GetQuestionsResult = yield self.environment.api.getQuestions(); // Nothing after this yield statement runs
      console.tron.log("AFTER GET QUESTIONS");

      if (result.kind === "ok") {
        self.saveQuestions(result.questions);
      } else {
        __DEV__ && console.tron.log(result.kind);
      }
    })
  }))

这是 api 的 getQuestions

async getQuestions(): Promise<Types.GetQuestionsResult> {
    // make the api call
    const response: ApiResponse<any> = await this.apisauce.get("", { amount: API_PAGE_SIZE })
    console.tron.log({response});
    // the typical ways to die when calling an api
    if (!response.ok) {
      const problem = getGeneralApiProblem(response);
      if (problem) return problem;
    }
    console.tron.log('AFTER OK CHECK')

    // transform the data into the format we are expecting
    try {
      const rawQuestion = response.data.results;
      console.tron.log({rawQuestion});
      const convertedQuestions: QuestionSnapshot[] = rawQuestion.map(convertQuestion);
      console.tron.log({convertedQuestions});
      return { kind: "ok", questions: convertedQuestions };
    } catch (e) {
      __DEV__ && console.tron.log(e.message);
      return { kind: 'bad-data' }
    }
  }

问题模型：

export const QuestionModel = types
  .model("Question")
  .props({
    id: types.identifier,
    category: types.maybe(types.string), 
    type: types.enumeration(['multiple', 'boolean']),
    difficulty: types.enumeration(['easy', 'medium', 'hard']),
    question: types.maybe(types.string), 
    correctAnswer: types.maybe(types.string), 
    incorrectAnswers: types.optional(types.array(types.string), []),
    guess: types.maybe(types.string)
  })
  .views((self) => ({
    get allAnswers() {
      return shuffle(self.incorrectAnswers.concat([self.correctAnswer]))
    },
    get isCorrect() {
      return self.guess === self.correctAnswer;
    }
  })) 
  .actions((self) => ({
    setGuess(guess: string) {
      self.guess = guess;
    }
  })) 

type QuestionType = Instance<typeof QuestionModel>
export interface Question extends QuestionType {}
type QuestionSnapshotType = SnapshotOut<typeof QuestionModel>
export interface QuestionSnapshot extends QuestionSnapshotType {}
export const createQuestionDefaultModel = () => types.optional(QuestionModel, {})

调试日志

从日志中可以看出，api 调用成功，并且 convertQuestions 正确记录，但之后没有任何记录。也许我误解了生成器函数的工作原理，但它不应该在产生函数返回一个值后恢复吗？

任何见解将不胜感激。

4

0 回答 0