Entrar Ainda não tem acesso?
1
resposta

[Bug] Erro no map

Referente ao curso Next.js: explorando o framework

por ALBERINANDO MAGNO CIPRIANO FERREIRA
| 65.3k xp | 42 posts

Olá, tudo bem? Estou com um pequeno problema com o map, o erro é esse: Server Error TypeError: Cannot read properties on undefined (reading 'map') Insira aqui a descrição dessa imagem para ajudar na acessibilidade

O código está assim:

import { useEffect, useState } from "react";
import Link from "../src/components/Link"

export async function getStaticProps() {
    const FAQ_API_URL = 'https://gist.githubusercontent.com/omariosouto/0ceab54bdd8182cbd1a4549d32945c1a/raw/578ad1e8e5296fa048e3e7ff6b317f7497b31ad9/alura-cases-faq.json'
    const faq = await fetch(FAQ_API_URL)
        .then((respostaDoServidor) => respostaDoServidor.json())
        .then((resposta) => resposta);
    return {
        props: {
            qualquercoisa: 'que eu passar aqui',
            faq,
        },
    };
}

export default function FAQPage({ faq }) {
    console.log(faq);
    //const [fag, setFaq] = useState([]);
    //useEffect(() => {
    //})
    return (
        <div>
            <h1>
                Alura Case - Páqinas de perguntas FAQ
            </h1>
            <Link href="/">
                Ir para Home
            </Link>
            <ul>
                {faq.map(({ answer, question }) => (
                    <li key={question}>
                        <article>
                            <h2>{question}</h2>
                            <p>{answer}</p>
                        </article>
                    </li>
                ))}
            </ul>
        </div>
    )
}

Como posso resolver esse erro?

1 resposta
por NATHALIA QUEIROZ
| 2170.7k xp | 5106 posts
Alura Scuba Team Suporte Educacional

Oii, Alberinando! Tudo bem?

Desculpa a demora para responder o seu tópico.

O erro ocorre devido à requisição que falha quando há tentativa de busca dos dados da API na função getStaticProps, e o valor de faq retorna como undefined.

Uma possível solução para esse caso é adicionar uma verificação para garantir que faqnão seja undefined antes de usar o método map. Para exemplificar, veja o código abaixo:

export default function FAQPage({ faq }) {
    console.log(faq);
    if (!faq) {
        return <div>Loading...</div>; // Ou uma mensagem de erro, caso a requisição falhe
    } 
    
    return (
            //restante do código.
    )
}

No exemplo acima, o código emitirá uma mensagem de erro ou de carregamento, quando faq for undefined, em vez de tentar chamar map em um valor indefinido.

Além disso, verifique se a chamada à API está retornando os dados corretamente e se os dados retornados estão no formato certo para serem mapeados.

Espero que essa sugestão seja um bom ponto de partida. Qualquer dúvida, conte comigo!

Bons estudos, Alberinando!