React 拋出未定義的錯誤，但僅在我的 JSX 中

Question

我想要的是在 10 個問題測驗結束時顯示您在瑣事中得到的正確答案的數量。 到目前為止，我已經完成了所有工作。 我希望它顯示正確答案的數量，但我收到一個錯誤“無法讀取未定義的屬性”指向這一行

<p> {results.correct} </p>

這是整個組件，我希望我將所有內容都標記得足夠好以使其可讀

function App() {
  //useState variables
  const [results, setResults] = useState({
    correct: 0,
    answer: "True",
  });
  const [arrayIndex, setArrayIndex] = useState(0);
  const [classOn, setClassOn] = useState("trivia-cards-initial");
  const [triviaArray, setTriviaArray] = useState([]);
  const [disable, setDisable] = useState(true);

  //useEffects
  useEffect(() => {
    axios
      .get("https://opentdb.com/api.php?amount=10&difficulty=hard&type=boolean")
      .then((res) => {
        setTriviaArray(res.data.results);
      });
  }, []);

  //onclicks and helper functions
  const nextQuestionOnClick = () => {
    setClassOn(`trivia-cards-initial-${arrayIndex}`);
    // setTriviaArray(triviaArray);
    setResults(() => {
      if (triviaArray[arrayIndex].correct_answer === results.answer) {
        setResults({ ...results, correct: results.correct + 1 });
      } else {
        setResults({ ...results });
      }
    });
    setArrayIndex(() => {
      if (arrayIndex > 8) {
        return 9;
      } else {
        return arrayIndex + 1;
      }
    });
    console.log(triviaArray);
    console.log({ ...results });
  };
  const beginOnClick = () => {
    setClassOn(`trivia-cards-initial-${arrayIndex}`);
    // setTriviaArray(triviaArray);
    setArrayIndex(() => {
      if (arrayIndex > 8) {
        return 9;
      } else if (arrayIndex === 0) {
        return arrayIndex;
      } else {
        return arrayIndex + 1;
      }
    });
  };

  const answerButtonTrue = () => {
    setResults({
      ...results,
      answer: "True",
    });
    setDisable(false);
  };
  const answerButtonFalse = () => {
    setResults({
      ...results,
      answer: "False",
    });
    setDisable(false);
  };

  function calculator() {
    return results.correct;
  }

  //JSX
  if (classOn === "trivia-cards-initial") {
    return (
      <div className={classOn}>
        <h1 className="title">Welcome To The Trivia Challange!</h1>
        <h3 className="text-content-middle">
          You will be presented with 10 True or False questions.
        </h3>
        <h3 className="text-content-bottom">Can you score 100%?</h3>
        <div className="begin-btn-bg">
          <button className="buttons" onClick={beginOnClick}>
            BEGIN
          </button>
        </div>
      </div>
    );
  } else if (classOn === "trivia-cards-initial-9") {
    return (
      <div>
        <p> {results.correct} </p>
      </div>
    );
  } else {
    return (
      <div className="bg-cards">
        <div className="trivia-cards">
          <div className={classOn}>
            <h2 className="category">{triviaArray[arrayIndex].category}</h2>
            <h3 className="trivia-questions">{`${triviaArray[arrayIndex].question}`}</h3>
            <button className="true-btn" onClick={answerButtonTrue}>
              True
            </button>
            <button className="true-btn" onClick={answerButtonFalse}>
              False
            </button>
            <p>Correct Answer:{triviaArray[arrayIndex].correct_answer}</p>

            <button
              className="buttons"
              onClick={nextQuestionOnClick}
              disabled={disable}
            >
              Next Question
            </button>
          </div>
        </div>
      </div>
    );
  }
}

Answer 1

很可能是由於未初始化的變量造成的，您必須正確處理它。 請使用這樣的東西：

{results && typeof results.correct !== "undefined" && (
  <p> {results.correct} </p>
)}

在這里，您要檢查results和results.correct是否為真，然后再嘗試顯示它。 這應該解決它。 讓我知道。

或者以簡單的方式，您可以執行以下操作：

{results && results.correct > -1 && (
  <p> {results.correct} </p>
)}

上面的一個是因為，如果results.correct是0呢！