Блог

Я только начал практиковаться на TypeScript и React и я не знаю, где я ошибаюсь в этой проблеме. Они просто продолжали говорить мне ‘Не удается прочитать свойство ‘map’ неопределенного’. Может кто-нибудь сказать мне, где я ошибаюсь?

 // 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 amp;amp; !gameOver amp;amp;(
    <QuestionCard
      questionNumber ={number   1}
      totalQuestions = {TOTAL_QUESTIONS}
      question={questions[number].question}
      answers ={questions[number].answers}
      userAnswer = {userAnswer ? userAnswer[number]: undefined}
      callback={checkAnswer}
    />
    )}
    {!gameOver amp;amp; 
    !loading amp;amp; 
    userAnswer.length === number   1 amp;amp; 
    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;

  

QuestionCard.jsx

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


  

Проверьте, что это answers не undefined , и предпримите соответствующие действия, если это так

 <div>
    {answers
        ? answers.map((answer)=>(
            <div key={answer}>
                <button disabled={userAnswer} onClick={callback}>
                    <span dangerouslySetInnerHTML={{ __html:answer}}/>
                </button>
            </div>
        ))
        : 'No answers!'
    }
</div>