javascript - 'TypeError：无法读取未定义的属性'不正确'，但console.log显示没有未定义的内容

Question

我已经为这个错误工作了两个小时，但没有得到任何结果。我收到 typeError，但是，我找不到任何未定义的内容。听起来它可能是一个没有定义值的变量，但我不知道在哪里。在这一点上，任何建议都会很棒。下面是我的代码，我正在使用 React：

import './App.css';
import React, {useState} from 'react';
import jsonData from './data/Apprentice_TandemFor400_Data.json';


function App() {
  
const loadData = () => JSON.parse(JSON.stringify(jsonData));
const triviaList = loadData()

const [curQuest, setCurQuest] = useState(0);
const [points, setPoints] = useState(0);
// const [answers, setAnswer] = useState([])

const shuffleAns = (ans) =>{
  var curIndex = ans.length, tempVal, randIn;
  while (0 !== curIndex){
    randIn = Math.floor(Math.random() * curIndex);
    curIndex -= 1;
    tempVal = ans[curIndex];
    ans[curIndex] = ans[randIn];
    ans[randIn] = tempVal;

  }
  return ans
}

const current = triviaList[curQuest]
const answers = shuffleAns([...current.incorrect, current.correct])
const answOpt = answers.map((option) => option)

const handleAnswer = (answer) => {
  if (toString(answer) === toString(current.correct)){
    setPoints(points + 1)
  }
  const nextQuest = curQuest + 1;
  setCurQuest(nextQuest);
  }
  return (
    <>
    <div>Trivia Game</div>
    <div>{current.question}</div>
    <div>
    { answOpt.map((answer, i) => {
    return (<button onClick={handleAnswer(answer)} key={i}>{answer}</button>
    )
    })}
    </div>
    </>

  );
}

export default App;

这是我正在使用的 JSON 文件：

[
  {
    "question": "What was Tandem previous name?",
    "incorrect": ["Tandem", "Burger Shack", "Extraordinary Humans"],
    "correct": "Devmynd"
  },
  {
    "question": "In Shakespeare's play Julius Caesar, Caesar's last words were...",
    "incorrect": ["Iacta alea est!", "Vidi, vini, vici", "Aegri somnia vana"],
    "correct": "Et tu, Brute?"
  },
  {
    "question": "A group of tigers are referred to as:",
    "incorrect": ["Chowder", "Pride", "Destruction"],
    "correct": "Ambush"
  },
  {
    "question": "What is the top speed an average cat can travel?",
    "incorrect": ["42 mph", "13 mph", "9 mph"],
    "correct": "31 mph"
  },
  {
    "question": "A cat can jump to _____ times its own height:",
    "incorrect": ["3", "9", "7"],
    "correct": "5"
  },
  {
    "question": "What is the only letter that doesn't appear in a US state name?",
    "incorrect": ["M", "Z", "X"],
    "correct": "Q"
  },
  {
    "question": "What is the name for a cow-bison hybrid?",
    "incorrect": ["Cowson", "Bicow", "Mooson"],
    "correct": "Beefalo"
  },
  {
    "question": "What is the largest freshwater lake in the world?",
    "incorrect": ["Lake Baikal", "Lake Michigan", "Lake Victoria"],
    "correct": "Lake Superior"
  },

  {
    "question": "In a website address bar, what does WWW stand for?",
    "incorrect": ["Wild Wild West", "War World Web"],
    "correct": "World Wide Web"
  },
  {
    "question": "In a game of bingo, what number is represented by the name two little ducks?",
    "incorrect": ["20", "55", "77"],
    "correct": "22"
  },
  {
    "question": "According to Greek mythology, who was the first woman on Earth?",
    "incorrect": ["Lilith", "Eve", "Hera"],
    "correct": "Pandora"
  },
  {
    "question": "In which European city would you find Orly airport?",
    "incorrect": ["London", "Belgium", "Munich"],
    "correct": "Paris"
  },
  {
    "question": "Where would you find the Sea of Tranquility?",
    "incorrect": ["California", "Siberia", "China"],
    "correct": "The Moon"
  },
  {
    "question": "Which artist painted 'Girl with a Pearl Earrin'?",
    "incorrect": ["Van Gogh", "Picasso", "Da Vinci"],
    "correct": "Vermeer"
  },
  {
    "question": "What is the official name for the 'hashtag' symbol?",
    "incorrect": ["Number sign", "Hash Sign", "Pound"],
    "correct": "Octothorpe"
  },
  {
    "question": "Not American at all, where is apple pie from?",
    "incorrect": ["Japan", "Ethiopia", "Canada"],
    "correct": "England"
  },
  {
    "question": "What is the national animal of Scotland?",
    "incorrect": ["Bear", "Rabbit", "Seal"],
    "correct": "Unicorn"
  },
  {
    "question": "Where in the world is the only place where Canada is *due south*",
    "incorrect": ["Alaska", "Russia", "Washington"],
    "correct": "Detroit"
  },
  {
    "question": "Approximately how many grapes go into a bottle of wine?",
    "incorrect": ["500", "200", "1000"],
    "correct": "700"
  },
  {
    "question": "How much does a US One Dollar Bill cost to make?",
    "incorrect": ["$0.25", "$1", "$5"],
    "correct": "$0.05"
  },
  {
    "question": "The Vatican bank has the only ATM in the world that allows users to do what?",
    "incorrect": [
      "Receive withdrawls in rosary beads",
      "Vote for the Pope",
      "Purchase indulgences"
    ],
    "correct": "Perform transactions in Latin"
  }
]

如果我遗漏了必要的信息，这是我第一次发帖道歉。

标签： javascriptjsonreactjstypeerror

Answer 1

如果您看到我设置curQuest为null并产生确切的错误。如果您编辑它并设置curQuest为0，它会按预期工作：

const triviaList = JSON.parse(`[
  {
    "question": "What was Tandem previous name?",
    "incorrect": ["Tandem", "Burger Shack", "Extraordinary Humans"],
    "correct": "Devmynd"
  }]`);
const [curQuest, setCurQuest] = [null, ''];
const shuffleAns = (ans) => {
  var curIndex = ans.length,
    tempVal, randIn;
  while (0 !== curIndex) {
    randIn = Math.floor(Math.random() * curIndex);
    curIndex -= 1;
    tempVal = ans[curIndex];
    ans[curIndex] = ans[randIn];
    ans[randIn] = tempVal;

  }
  return ans
}
const current = triviaList[curQuest];
const answers = shuffleAns([...current.incorrect, current.correct])
console.log(answers);