Ainda não tem acesso? Estude com a gente! Matricule-se
Ainda não tem acesso? Estude com a gente! Matricule-se

Solucionado (ver solução)

Como consumir a API com o FETCH API?

No vídeo o instrutor mencionou que podemos fazer o consumo da API com fetch API, eu tentei aplicar, mas nao estou conseguindo, poderiam me ajudar? =D

import React, { useState } from 'react';
import { 
  UserRegisterContainer, 
  UserRegisterTable, 
  UserRegisterTableHead,
  UserRegisterTableSupport, 
  UserRegisterTableTitle, 
  UserRegisterTableBody,
  UserRegisterTableContent 
} from './styles';

const UserRegister = () => {

  const [lists, setLists] = useState([{}]);

  const URL_AUTHORS = 'https://cdc-react.herokuapp.com/api/autores/';

  new Promise((resolves, reject) => {
    fetch(URL_AUTHORS, {
      method: 'GET',
    })
    .then(data => {
      if(data) {
        data.json();
      }
      else {
        reject();
      }
    })
    .catch(error => {
      reject();
    })
  })

  return (
    <UserRegisterContainer>
      <UserRegisterTable>
        <UserRegisterTableHead>
          <UserRegisterTableSupport>
            <UserRegisterTableTitle>Nome</UserRegisterTableTitle>
            <UserRegisterTableTitle>E-mail</UserRegisterTableTitle>
          </UserRegisterTableSupport>
        </UserRegisterTableHead>
        <UserRegisterTableBody>
            {[lists.map((list, key) => (
              <UserRegisterTableSupport key={key}>
                <UserRegisterTableContent>{list.name}</UserRegisterTableContent>
                <UserRegisterTableContent>{list.email}</UserRegisterTableContent>
              </UserRegisterTableSupport>
            ))]}
        </UserRegisterTableBody>
      </UserRegisterTable>
    </UserRegisterContainer>
  )
}

export default UserRegister;
1 resposta
solução

Boa noite, Gabryelle! Como vai?

Esse tipo de coisa vc vê nessa aula do curso novo de React. Esse curso que vc está assistindo é mais antigo, então sugiro fortemente que vc dê preferência aos cursos mais atualizados! Seguem os links.

https://cursos.alura.com.br/course/react-componentes-reutilizaveis

https://cursos.alura.com.br/course/react-validacao-rotas-api

Qualquer coisa é só falar!

Grande abraço e bons estudos, minha aluna!