-2

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:"
5
  • 1
    O que é response.data? Commented 4/03/2021 às 12:14
  • response é o retorno da promise que busca os dados de uma API, data é um elemento que esta dentro de response, o qual traz array de dados das questões.
    – Fred
    Commented 4/03/2021 às 12:19
  • 1
    quiz[0] é undefined no início. Seu valor inicial é [] . Experimente o {quiz[0]?. question}
    – Ajeet Shah
    Commented 4/03/2021 às 12:21
  • Perdão @LuizFelipe. Editei a questão.
    – Fred
    Commented 4/03/2021 às 12:25
  • 1
    Realmente @AjeetShah, o problema era esse, muito obrigado!
    – Fred
    Commented 4/03/2021 às 12:25

1 Resposta 1

3

Você está tentando renderizar os elementos mesmo que não tenham sido carregados ainda. Conforme indicado nos comentários, antes do api.get ter sido resolvido, o componente já está sendo renderizado como um array vazio. Ele será renderizado novamente quando o array tiver sido propriamente carregado.

Desse modo, você deve garantir que alguma coisa deve ser mostrada enquanto o array ainda estiver vazio. Uma opção é verificar pelo comprimento do array utilizando a propriedade length. Mais ou menos isso:

if (quiz.length === 0) {
  return <p>Carregando...</p>;
}

return <p>Primeiro item: {quiz[0].question}</p>;

Assim você está garantindo que só acessará a propriedade question caso o array possua comprimento diferente de zero (nesse caso será sempre maior que zero). Isso evita o erro Cannot read property ... of undefined.

Uma outra opção é criar um outro estado para manter a informação do carregamento, que é mais robusta na maioria dos casos. Se você optar por isso, terá que mantê-lo manualmente. Muitas pessoas optam por chamar de isLoading ou algo do tipo.

2

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .