Guia para buscar e exibir dados da API em React JS

Publicados: 2024-10-01

Buscar e exibir dados de uma API é uma tarefa fundamental em aplicações React modernas. Com a evolução do React, a busca de dados tornou-se mais simplificada e oferece vários métodos para fazer solicitações HTTP. Neste guia, abordaremos as etapas para buscar e exibir dados usando React.

Índice

Alternar

Configurando o Projeto React

Antes de mergulhar na busca de API, certifique-se de ter um projeto React configurado. Você pode criar um usando

  • npx create-react-app my-app
    cd my-app
    npm start

Isso inicializa um novo projeto React e executa um servidor de desenvolvimento.

️ Passo a passo: buscando dados no React

1. Crie um estado para armazenar dados

Use o gancho useState para criar uma variável de estado para armazenar os dados buscados.

javascript

  • const [data, setData] = useState([]);

2. Obtenha dados da API com useEffect

O gancho useEffect do React garante que a busca de dados aconteça quando o componente for montado. A função fetch() é usada para recuperar dados da API.

javascript

  • useEffect(() => {
    fetch('https://api.example.com/data')
    .then(response => response.json())
    .then(data => setData(data))
    .catch(error => console.error('Error:', error));
    }, []);

3. Exibir os dados buscados

Depois que os dados forem obtidos, eles podem ser renderizados no JSX usando o método map() :

  • return (
    <div>
    <ul>
    {data.map(item => (
    <li key={item.id}>{item.name}</li>
    ))}
    </ul>
    </div>
    );

️ Usando Axios para buscar dados

Embora fetch() seja a API nativa do navegador, muitos desenvolvedores preferem usar bibliotecas como Axios devido à sua simplicidade e recursos poderosos. Aqui está um exemplo de uso do Axios:

Instale o Axios :

  • npm install axios

Buscando dados

  • useEffect(() => {
    axios.get('https://api.example.com/data')
    .then(response => setData(response.data))
    .catch(error => console.error('Error:', error));
    }, []);

‍ Lidando com casos extremos

  • Estados de carregamento : é importante gerenciar um estado de carregamento enquanto os dados estão sendo buscados.
  • Tratamento de erros : implementar o tratamento de erros adequado pode melhorar a experiência do usuário.

Exemplo:

const [loading, setLoading] = useState(true);
const [error, setError] = useState(null);

useEffect(() => {
fetch('https://api.example.com/data')
.then(response => response.json())
.then(data => {
setData(data);
setLoading(false);
})
.catch(error => {
setError(error);
setLoading(false);
});
}, []);

Conclusão

Buscar e exibir dados de APIs no React é essencial para a criação de aplicações web dinâmicas. Seja usando a API fetch() ou uma biblioteca como Axios, o processo envolve definir um estado para armazenar dados, fazer a solicitação e renderizar os resultados. Ao compreender essas etapas e lidar com casos extremos, como carregamento e erros, você pode criar aplicativos responsivos e baseados em dados com eficiência.

Perguntas frequentes

1. Como configuro um projeto React para começar a buscar dados da API?

Para configurar um projeto React, execute os seguintes comandos:

npx create-react-app my -app
cd my -app
npm start

Isso inicializa o projeto e inicia um servidor de desenvolvimento.

2. Como armazeno os dados buscados no React?

Você pode armazenar dados buscados usando o gancho useState . Exemplo:

const [data, setData] = useState ([]);

3. Como posso buscar dados no React quando o componente é montado?

Use o gancho useEffect para buscar dados quando o componente for montado:

useEffect ( () => {
fetch ( 'https://api.example.com/data' )
. then ( response => response. json ())
. then ( data => setData (data))
. catch ( error => console . error ( 'Error:' , error));
}, []);

4. Qual é o propósito de usar o método map() no React ao renderizar dados?

O método map() é usado para percorrer o array de dados buscado e renderizar cada item no JSX. Por exemplo:

<ul>
{data. map ( item => (
< li key = {item.id} > {item.name} </ li >
))}
</ul>

5. Por que eu usaria Axios em vez da API fetch?

Muitos desenvolvedores preferem o Axios porque ele simplifica as solicitações HTTP, oferece mais recursos e oferece suporte a navegadores mais antigos de forma mais consistente.

6. Como instalo o Axios em meu projeto React?

Para instalar o Axios, execute:

npm install axios

7. Como faço para buscar dados usando Axios no React?

Com o Axios, você pode buscar dados como estes:

useEffect ( () => {
axios. get ( 'https://api.example.com/data' )
. then ( response => setData (response. data ))
. catch ( error => console . error ( 'Error:' , error));
}, []);

8. Como posso lidar com os estados de carregamento ao buscar dados no React?

Você pode gerenciar os estados de carregamento criando uma variável loading com useState . Por exemplo:

const [loading, setLoading] = useState ( true );

useEffect ( () => {
buscar ( 'https://api.example.com/data' )
. então ( resposta => resposta. json ())
. então ( dados => {
setData (dados);
setLoading ( falso );
});
}, []);

9. Como lidar com erros ao buscar dados?

Para lidar com erros, defina um estado error e atualize-o caso a solicitação falhe:

const [error, setError] = useState ( null );

useEffect ( () => {
buscar ( 'https://api.example.com/data' )
. pegar ( erro => {
setError (erro);
setLoading ( falso );
});
}, []);

10. Por que é importante lidar com casos extremos, como carregamento e erros na busca de API?

O tratamento de casos extremos, como carregamento e erros, garante que os usuários sejam informados sobre o estado atual da busca de dados e fornece uma experiência de usuário mais tranquila nos casos em que a recuperação de dados falha ou demora.