更新資料

我們來想一想要如何記錄使用者答對幾題。首先，我們利用useRef()新增一個變數correctCounter，也可以使用useState()，只是，因為我們會將內容放在result(state變數)，就不必使用useState()，因為使用useState()會用掉比較多的資源，盡量少用。

在English.js裡:

const correctCounter = useRef(0);

答對時，correctCounter就加一。

<aside> 📢 注意，我們把檢查答案的邏輯移到處理點選下一題的函數(onClickNext())中，避免答對同樣題目很多次。

</aside>

  function onClickNext() {
    if (answer === exams[currentQuestion.current].answer) {
      **correctCounter.current++;**
      setResult("正確，共答對" + correctCounter.current + "題");
    } else {
      setResult("錯誤，共答對" + correctCounter.current + "題");
    }
    setAnswer("");
    if (currentQuestion.current + 1 < exams.length) {
      currentQuestion.current++;
      setQuestion(exams[currentQuestion.current].question);
    } else {
      props.next();//下個單元
    }
  }

  function onChangeAnswer(event) {
    setAnswer(event.target.value);
  }

要記得，換單元時，correctCounter要歸0。

useEffect(() => {
    async function fetchData() {
      currentQuestion.current = 0; //reset currentQuestion
      **correctCounter.current = 0; //reset correctCounter**

試試看，是不是能正常計算答對的題數。

Collection in a Document

怎麼把在換單元前將本單元的得分寫進firestore? 當我們會有多個單元要記錄時，要怎麼處理? 可以利用文件中的集合。

• Cloud Firestore Data model

在firestore裡，要去抓文件中的集合中的文件，很簡單。例如，以下的語法可以取得「user」集合下下，文件id為auth.currentUser.uid，「English」集合下，文件id為props.unit的文件，因為文件id必須是字串，利用「""+props.unit」將內容轉為字串

在English.js裡:

      const docRef = doc(
        db,
        "user",
        auth.currentUser.uid,
        "English",
        "" + props.unit
      );

另外，如果文件不存在就要利用setDoc()產生文件，如果已經存在就利用updateDoc()更新文件

<aside> 📢 記得要import使用到的函數!!

</aside>

看一下範例:

  async function onClickNext() {
    if (answer === exams[currentQuestion.current].answer) {
      correctCounter.current++;
      setResult("正確，共答對" + correctCounter.current + "題");
    } else {
      setResult("錯誤，共答對" + correctCounter.current + "題");
    }
    setAnswer("");
    if (currentQuestion.current + 1 < exams.length) {
      currentQuestion.current++;
      setQuestion(exams[currentQuestion.current].question);
    } else {
      //跳下個單元
      const auth = getAuth(app);
      **const docRef = doc(
        db,
        "user",
        auth.currentUser.uid,
        "English",
        "" + props.unit
      );**
      const docSnap = await getDoc(docRef);
      if (docSnap.exists()) {
        await updateDoc(docRef, {
          correctCounter: correctCounter.current
        });
      } else {
        await setDoc(docRef, {
          correctCounter: correctCounter.current
        });
      }
      props.next(); //下個單元
    }
  }