0

Olá, pesquisei sobre o assunto e vi que pode ser erro que pode ser por conta de não estar recebendo um array. Porém, coloquei pra ser retornado um array na API, pode ser consultado aqui https://agendaapplp3.herokuapp.com/contatos

só que na parte do react aparece esse erro, "TypeError: contacts.map is not a function". segue o código:

   const ListContacts: React.FC = () => {
  
   const [contacts, setContacts] = useState <ContactsProps[]>([]);

   async function getContacts(){
       const response = await api.get<ContactsProps[]>("/contatos");
      setContacts(response.data);
   }
   useEffect(()=>{
       getContacts();
   },[]);

o erro está nessa parte abaixo.

{contacts.map((contact)=>(
                                <tr>
                                    <td>{contact.id}</td>
                                    <td>{contact.nome}</td>
                                    <td>{contact.email}</td>
                                    <td>{contact.telefone}</td>
                                    <td>{contact.idlocal}</td>
                                    <td>{contact.idtipocontato}</td>
                                </tr>

para se conectar a api, utilizei o axios

    import axios from "axios";

    const api = axios.create({
     baseURL:"https://agendaapplp3.herokuapp.com"
    })

    export default api;

sou novo em React, o que pode ser?

2
  • Voce nao deveria colocar no seu setContacts como response.data.results? pois ai sim seu results e um array. Commented 15/06/2020 às 21:29
  • coloquei e me apareceu isso Property 'results' does not exist on type 'ContactsProps[]'. TS2339 Se adianta de algo, meu ContactsProps[] está assim: interface ContactsProps{ id:number; nome:string; email:string; telefone:string; idlocal:number; idtipocontato:number; } Commented 15/06/2020 às 21:34

1 Resposta 1

1

Resolvi seu problema, eu acho, colocando uma interface para o Response, e no setContacts colocamos response.data.results. Desta forma:


interface ContactsProps {
  id: number;
  nome: string;
  email: string;
  telefone: string;
  idlocal: number;
  idtipocontato: number;
}

interface Response { // Uma interface para o Response.
  data: {
    results: [];
  };
}

const api = axios.create({
  baseURL: 'https://agendaapplp3.herokuapp.com',
});

const ListContacts: React.FC = () => {
  const [contacts, setContacts] = useState<ContactsProps[]>([]);

  async function getContacts() {
    const response: Response = await api.get('/contatos'); // informamos ao TS que a resposta tera o formado do Response.

    setContacts(response.data.results); // set dos arrays para o contacts
  }
  useEffect(() => {
    getContacts();
  }, []);

  return (
    <>
     <table>
      {contacts &&
        contacts.map((contact: ContactsProps) => (
          <tr key={Math.random()}>
            <td>{contact.id}</td>
            <td>{contact.nome}</td>
            <td>{contact.email}</td>
            <td>{contact.telefone}</td>
            <td>{contact.idlocal}</td>
            <td>{contact.idtipocontato}</td>
          </tr>
        ))}
     </table>
    </>
  );
};

export default ListContacts;

Tente fazer os testes. Espero ter ajudado.

3
  • Caraca, resolveu mesmo, muito obrigado! Mas poderia explicar? Como disse estou começando em react e por que do jeito que fiz estava errado? Commented 15/06/2020 às 22:15
  • nesse seu comentario anterior: coloquei e me apareceu isso Property 'results' does not exist on type 'ContactsProps[]'. TS2339, voce tentou atribuir a interface ContactsProps ao response?. Essa interface do Response nem era necessario, eu so coloque ela quando estava testando seu codigo e quando executei de primeira, funcionou. Mas explicando de uma maneira simples, a interface server pra voce explicar pro TS como vai ser a estrutura de um determinado objeto. Entao eu falei pro TS que o response teria a propriedade data e dentro de data teriamos o results do tipo array. Commented 15/06/2020 às 22:23
  • Entendi, obrigado! Commented 15/06/2020 às 22:25

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 .