Estou desenvolvendo uma aplicação de Quiz utilizando React com a finalidade de estudo.
Tenho o estado chamado Quiz, o mesmo é composto por:
interface QuestionData {
id: number;
question: string;
explanation: string;
options: OptionsData;
}
Gostaria de exibir somente o primeiro elemento do array na tela, sei que a forma para fazer isso seria:
<p>{quiz[0].question}</p>
Mas, desta forma, estou recebendo o seguinte erro:
TypeError: Cannot read property 'question' of undefined
Caso eu imprimir utilizando console.log(quiz[0].question)
, recebo o retorno desejado.
Existe alguma outra forma? Ou a forma que achei ser correta não é?
Código completo abaixo:
interface VideoInfo {
video_id: number;
}
type OptionsData = any[];
interface QuestionData {
id: number;
question: string;
explanation: string;
options: OptionsData;
}
const Quiz: React.FC<VideoInfo> = video_id => {
const [quiz, setQuiz] = useState<QuestionData[]>([]);
const video = video_id;
const getQuiz = useCallback(async () => {
try {
await api.get(`/quiz/video/${video}`).then(response => {
setQuiz(response.data);
});
} catch (err) {
alert('error');
}
}, [video]);
useEffect(() => {
getQuiz();
}, [getQuiz]);
return (
<Container>
<ol>
<li>
<div className="question">
{/* O erro acontece aqui: */}
<p>{quiz[0].question}</p>
<div>
<Button type="button">A</Button>
<Button type="button">B</Button>
<Button type="button">C</Button>
<Button type="button">D</Button>
</div>
</div>
</li>
</ol>
</Container>
);
};
export default Quiz;
Esta é a saída de console.log(response.data)
quando invocado dentro da função getQuiz
:
Array(2)
0:
explanation: "Sempre é necessário redobrar a atenção ao sair da via para um
acostamente."
id: 6
options: (4) [{…}, {…}, {…}, {…}]
question: "Quais cuidados ao sair da via para um acostamento?"
1:
explanation: "Precisamos manter uma distância segura a todo momento."
id: 7
options: (4) [{…}, {…}, {…}, {…}]
question: "Para que tenhamos a menor distância de frenagem:"
response.data
?quiz[0]
éundefined
no início. Seu valor inicial é[]
. Experimente o{quiz[0]?. question}