"类型错误:无法读取未定义的属性'incorrect'",但控制台.log显示没有未定义的内容



我已经处理这个错误两个小时了,但没有取得任何进展。我得到了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"
}
]

这是我第一次发帖,所以如果我遗漏了必要的信息,我很抱歉。

如果您看到我将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);

最新更新