利用陣列儲存題庫

上週我們學會了利用react產生簡單的一個數學四則運算練習，我們來想想看如果是無法利用亂數產生題目的科目，要怎麼處理? 例如，要讓學生練習化學元素表，那要怎麼處理? 請新增一個Chemistry.js，內容是:

import "./styles.css";
import { useState } from "react";

export default function Chemistry() {
  const [answer, setAnswer] = useState("");
  const [result, setResult] = useState("");

  function onChangeAnswer(event) {
    setAnswer(event.target.value);
    if (event.target.value === "H") {
      setResult("正確");
    } else {
      setResult("錯誤");
    }
  }

  return (
    <div>
      氫的化學符號
      <input
        type="text"
        name="answer"
        value={answer}
        onChange={onChangeAnswer}
      />
      {result}
    </div>
  );
}

App.js要更改為:

import "./styles.css";
import Chemistry from "./Chemistry";

export default function App() {
  return (
    <div className="App">
      <h1>Hello CodeSandbox</h1>
      <h2>Start editing to see some magic happen!</h2>

      <Chemistry />
    </div>
  );
}

如果要有很多題呢? 那就可以用到javascript的一個概念:陣列。甚麼是陣列呢? 就是讓變數裡包含多個值。我們先定義一個陣列，包括多個題目:

let questions = **["氫的化學符號", "氧的化學符號", "氦的化學符號"]**;

一開始，我們預設題目為第一題，在陣列裡，是以0表示第一個值

const [question, setQuestion] = useState(**questions[0]**);

這時候，可以看到第一個題目

按「下一題」時，我們利用setQuestion()，更換題目，為什麼要獨立寫成function呢? 一方面，把更換題目所需要的程式碼放在這個函數裡，另外，這樣才能利用onClick來呼叫這個函數。

  function generateQuestion() {
    **setQuestion(questions[1]);**
  }

完整的程式:

import "./styles.css";
import { useState } from "react";

export default function Chemistry() {
  **let questions = ["氫的化學符號", "氧的化學符號", "氦的化學符號"];**

  const [answer, setAnswer] = useState("");
  const [result, setResult] = useState("");
  const [question, setQuestion] = useState(**questions[0]**);

  function generateQuestion() {
    **setQuestion(questions[1]);**
  }

  function onChangeAnswer(event) {
    setAnswer(event.target.value);
    if (event.target.value === "H") {
      setResult("正確");
    } else {
      setResult("錯誤");
    }
  }

  return (
    <div>
      {question}
      <input
        type="text"
        name="answer"
        value={answer}
        onChange={onChangeAnswer}
      />
      {result}
      **<button onClick={generateQuestion}>下一題</button>**
    </div>
  );
}

那怎麼產生第三題呢? 這時候，我們就要利用一個變數(currentQuestion)來記錄我們現在回答到第幾題了! 記得上週說明過的，要使用useRef()，否則，currentQuestion會被設為0

import "./styles.css";
import { useState, useRef } from "react";

export default function Chemistry() {
  let questions = ["氫的化學符號", "氧的化學符號", "氦的化學符號"];
  **const currentQuestion = useRef(0);**
  const [answer, setAnswer] = useState("");
  const [result, setResult] = useState("");
  const [question, setQuestion] = useState(questions[0]);

  function generateQuestion() {
    **currentQuestion.current++;**
    setQuestion(questions[**currentQuestion.current**]);
  }

  function onChangeAnswer(event) {
    setAnswer(event.target.value);
    if (event.target.value === "H") {
      setResult("正確");
    } else {
      setResult("錯誤");
    }
  }

  return (
    <div>
      {question}
      <input
        type="text"
        name="answer"
        value={answer}
        onChange={onChangeAnswer}
      />
      {result}
      <button onClick={generateQuestion}>下一題</button>
    </div>
  );
}

這時候會發現最後一題之後，會呈現空白，因為沒有題目了。如果要停留在最後一題，解決方法是: