在狀態值上使用擴展運算符后出現打字稿錯誤

Question

我不知道界面語法是否錯誤代碼編輯器很高興

interface innerQuiz1 {
  question: string;
  sectionId: number;
  attachmentId: number;
  options: string[];
  answers: string[];
}

interface innerQuiz {
  attempts: string;
  passing: string;
  quiz: innerQuiz1[];
  quizTitle: string;
}

interface courseQuiz {
  quiz: innerQuiz[];
  passing: number;
  attempts: number;
  quizTitle: string;
}

測驗的結構是這樣的 const [courseQuiz, setCourseQuiz] = useState<courseQuiz>();

  const onQuizFormSubmit = (e) => {
    console.log("from", e);
    setCourseQuiz({
      ...e,
      quiz: e.quiz.map((item, i) => ({
        sectionId: i,
        attachmentId: null,
        question: item.question,
        options: item.answer.map((item) => item.option),
        answers: item.answer
          .filter((item) => item.checked === true)
          .map((item) => item.option),
      })),
    });
  };

此函數正在更新狀態，沒有任何錯誤

  const courseQuizCheck = () => {
    console.log("From course quiz check", courseQuiz);
    if (courseQuiz) return courseQuiz;
    else {
      return {
        quiz: [],
        passing: null,
        attempts: null,
        quizTitle: null,
      };
    }
  };

再次在函數內部，我試圖像這樣傳播課程測驗

  const getCourseFromForm = () => {
    console.log("1.from getCourseFromForm", courseQuiz);
    console.log(
      "2.from getCourseFromForm after running the coursequizCheck function",
      courseQuizCheck()
    );

    console.log("4.coursequiz is spreded", ...courseQuiz);
    console.log(
      "3.from getCourseFromForm after spreading the coursequizCheckfunction",
      ...courseQuizCheck()
    );
    }

Typescript 在第三個控制台日志中抱怨...courseQuiz並且錯誤是

常量課程測驗：課程測驗 | 未定義類型'courseQuiz | undefined' 不是數組類型。ts(2461)

Typescript 在第 4 個控制台日志中抱怨...courseQuizCheck() ，錯誤是

**

const courseQuizCheck: () => courseQuiz | {
    quiz: never[];
    passing: null;
    attempts: null;
    quizTitle: null;
}

鍵入“課程測驗 | {測驗：從不[]； 通過：空； 嘗試：空； 測驗標題：空； }' 不是數組類型。ts(2461) ** 控制台也顯示錯誤，錯誤是 ** TypeError: courseQuiz is not iterable **

Answer 1

您正在嘗試傳播接口 CourseQuiz 的變量 courseQuiz，如下所示：

interface courseQuiz {
  quiz: innerQuiz[];
  passing: number;
  attempts: number;
  quizTitle: string;
}

您不能在控制台日志函數中傳播對象，只能傳播數組。