reactjs - 无法读取未定义的属性“地图”。打字稿和反应

Question

我刚开始练习 TypeScript 和 React，我不知道我在这个问题上哪里出错了。他们只是一直告诉我'无法读取未定义的属性'地图'。有人能告诉我哪里错了吗？

// Main files for application
import React,{useState} from 'react';
import {fetchQuizQuestions} from './API';
// Components
import QuestionCard from './components/QuestionCard';
// Types
import {QuestionState, Difficulty} from './API';

type AnswerObject = {
  question :string;
  answer :string;
  correct :boolean;
  correctAnswer :string;
}
const TOTAL_QUESTIONS = 10;

const App =() =>{
  const[loading,setLoading] = useState(false);
  const[questions,setQuestions] = useState<QuestionState[]>([]);
  const[number,setNumber] = useState(0);
  const[userAnswer,setUserAnswer] = useState<AnswerObject[]>([]);
  const[score,setScore] = useState(0);
  const[gameOver,setGameover] = useState(true);

  console.log(questions);

  const startTrivia = async () =>{
    setLoading(true);
    setGameover(false);

    const newQuestions = await fetchQuizQuestions(
      TOTAL_QUESTIONS,
      Difficulty.EASY
    );
      setQuestions(newQuestions);
      setScore(0);
      setUserAnswer([]);
      setNumber(0);
      setLoading(false);
  };
  const checkAnswer = (e: React.MouseEvent<HTMLButtonElement>)=>{

  }
  const nextQuestion=()=>{

  }
  return (<div className="App">Quiz
    <h1>REACT QUIZ</h1>
    {
      gameOver || userAnswer.length === TOTAL_QUESTIONS?(
    
    <button className="start" onClick={startTrivia}>
      Start
    </button>
      ):null}
    {!gameOver ? <p className="score">Score</p>: null}
    {loading ? <p>Loading Questions...</p> : null}
    {!loading && !gameOver &&(
    <QuestionCard
      questionNumber ={number + 1}
      totalQuestions = {TOTAL_QUESTIONS}
      question={questions[number].question}
      answers ={questions[number].answers}
      userAnswer = {userAnswer ? userAnswer[number]: undefined}
      callback={checkAnswer}
    />
    )}
    {!gameOver && 
    !loading && 
    userAnswer.length === number + 1 && 
    number !== TOTAL_QUESTIONS - 1 ? (
    <button className="next" onClick={nextQuestion}>
      Next Question
    </button>
    ):null }
  </div>
  );
}

export default App;

这是我一直在处理的另一个 QuestionCard 文件。控制台显示问题出在“answers.map”上。

import React from 'react';

type Props ={
    question:string;
    answers:string[];
    callback:any;
    userAnswer:any;
    questionNumber : number;
    totalQuestions:number;
};
const QuestionCard:React.FC<Props>=({
    question,
    answers,
    callback,
    userAnswer,
    questionNumber,
    totalQuestions,
    })=>(
<div>
    <p className='number'>
        Question:{questionNumber} / {totalQuestions}
    </p>
    <p dangerouslySetInnerHTML={{ __html:question}}/>
    <div>
        {answers.map((answer)=>(
            <div key={answer}>
                <button disabled={userAnswer} onClick={callback}>
                    <span dangerouslySetInnerHTML={{ __html:answer}}/>
                </button>
            </div>
        ))}
    </div>
</div>
);

export default QuestionCard;

标签： reactjstypescript

Answer 1

QuestionCard.jsx

<div>
   {/* make sure the `answers` exist */}
   {answers && answers.map((answer)=>(
       <div key={answer}>
          <button disabled={userAnswer} onClick={callback}>
             <span dangerouslySetInnerHTML={{ __html:answer}}/>
          </button>
       </div>
    ))}
</div>