Recentemente, mudei de Angular para ReactJs. Estou usando o jQuery para chamadas de API. Eu tenho uma API que retorna uma lista aleatória de usuários que deve ser impressa em uma lista.
Não sei como escrever minhas chamadas de API. Qual é a melhor prática para isso?
Eu tentei o seguinte, mas não estou obtendo nenhuma saída. Estou aberto a implementar bibliotecas de API alternativas, se necessário.
Abaixo está o meu código:
import React from 'react';
export default class UserList extends React.Component {
constructor(props) {
super(props);
this.state = {
person: []
};
}
UserList(){
return $.getJSON('https://randomuser.me/api/')
.then(function(data) {
return data.results;
});
}
render() {
this.UserList().then(function(res){
this.state = {person: res};
});
return (
<div id="layout-content" className="layout-content-wrapper">
<div className="panel-list">
{this.state.person.map((item, i) =>{
return(
<h1>{item.name.first}</h1>
<span>{item.cell}, {item.email}</span>
)
})}
<div>
</div>
)
}
}
javascript
jquery
reactjs
Raj Rj
fonte
fonte
componentDidMount
retorno de chamada.fetch()
vez do jQuery se usar apenas o jQuery para fazer solicitações do Ajax.useEffect
é provavelmente o lugar para fazer chamadas de API agora. Veja btholt.github.io/complete-intro-to-react-v5/effectsRespostas:
Nesse caso, você pode fazer uma chamada ajax dentro
componentDidMount
e atualizarstate
fonte
Você pode querer verificar a arquitetura Flux . Também recomendo verificar a Implementação do React-Redux . Coloque suas chamadas de API em suas ações. É muito mais limpo do que colocar tudo no componente.
Ações são tipos de métodos auxiliares que você pode chamar para alterar o estado do aplicativo ou fazer chamadas de API.
fonte
Use o
fetch
método insidecomponentDidMount
para atualizar o estado:fonte
Essa discussão já dura um tempo e a resposta de @Alexander T. forneceu um bom guia a seguir para os mais novos do React como eu. E vou compartilhar alguns conhecimentos adicionais sobre como chamar a mesma API várias vezes para atualizar o componente. Acho que provavelmente é um problema comum que o novato pode enfrentar no início.
componentWillReceiveProps(nextProps)
, da documentação oficial :Podemos concluir que aqui é o local em que manipulamos objetos do componente pai, temos chamadas de API e atualizamos o estado.
Com base no exemplo de @Alexander T.:
Atualizar
componentWillReceiveProps()
seria preterido.Aqui estão apenas alguns métodos (todos eles no Doc ) no ciclo de vida que eu acho que estariam relacionados à implantação da API no caso geral:
Ao referir o diagrama acima:
Implantar API no
componentDidMount()
O cenário adequado para a chamada da API aqui é que o conteúdo (da resposta da API) desse componente será estático, seja acionado
componentDidMount()
apenas uma vez enquanto o componente estiver montando, até mesmo novos adereços serão transmitidos do componente pai ou terão ações para liderarre-rendering
.O componente verifica a diferença para renderizar novamente, mas não para montar novamente .
Citação de doc :
static getDerivedStateFromProps(nextProps, prevState)
Devemos notar que existem dois tipos de atualização componente ,
setState()
em componente atual que não levam esse método para gatilho, mas re-renderização ou novos adereços de componente pai fazer. Poderíamos descobrir que esse método também é acionado durante a montagem.Este é um local adequado para implementar a API, se quisermos usar o componente atual como um modelo, e os novos parâmetros para a API são adereços provenientes do componente pai .
Recebemos uma resposta diferente da API e retornamos um novo
state
aqui para alterar o conteúdo deste componente.Por exemplo:
Temos uma lista suspensa para carros diferentes no componente pai, esse componente precisa mostrar os detalhes do carro selecionado.
componentDidUpdate(prevProps, prevState)
Difere da
static getDerivedStateFromProps()
, esse método é chamado imediatamente após cada renderização, exceto a renderização inicial. Poderíamos ter chamadas de API e renderizar diferença em um componente.Estenda o exemplo anterior:
O componente para mostrar os detalhes do carro pode conter uma lista de séries deste carro; se quisermos verificar a produção de 2013, podemos clicar ou selecionar ou ... o item da lista para liderar primeiro
setState()
a refletir isso comportamento (como destacar o item da lista) nesse componente e, a seguircomponentDidUpdate()
, enviamos nossa solicitação com novos parâmetros (estado). Depois de obter a resposta,setState()
novamente por renderizar o conteúdo diferente dos detalhes do carro. Para impedir que o seguintecomponentDidUpdate()
cause o loop infinito, precisamos comparar o estado utilizandoprevState
no início deste método para decidir se enviaremos a API e renderizaremos o novo conteúdo.Esse método realmente pode ser utilizado da mesma maneira que
static getDerivedStateFromProps()
com adereços, mas é necessário lidar com as alteraçõesprops
utilizandoprevProps
. E precisamos cooperarcomponentDidMount()
para lidar com a chamada inicial da API.Citação de doc :
fonte
Gostaria que você desse uma olhada no redux http://redux.js.org/index.html
Eles têm uma maneira muito bem definida de lidar com chamadas assíncronas, ou seja, chamadas de API e, em vez de usar o jQuery para chamadas de API, eu gostaria de recomendar o uso de buscar ou solicitar pacotes npm, atualmente a busca é suportada por navegadores modernos, mas um shim também está disponível para lado do servidor.
Há também esse outro superagente de pacote incrível , que tem muitas opções ao fazer uma solicitação de API e é muito fácil de usar.
fonte
A função Render deve ser pura, significa que ele usa apenas state e props para renderizar, nunca tente modificar o estado na renderização, isso geralmente causa erros feios e diminui significativamente o desempenho. Também é um bom ponto se você separar a busca de dados e apresentar preocupações no seu React App. Eu recomendo que você leia este artigo, que explica muito bem essa ideia. https://medium.com/@learnreact/container-components-c0e67432e005#.sfydn87nm
fonte
Esta parte da documentação do React v16 responderá à sua pergunta, leia sobre componentDidMount ():
Como você vê, componentDidMount é considerado o melhor local e ciclo para fazer a chamada da API , também acessa o nó, significa que agora é seguro fazer a chamada, atualizar a visualização ou o que você poderia fazer quando o documento estiver pronto, se você estiver usando o jQuery, ele deve lembrá-lo de alguma maneira a função document.ready (), onde você pode garantir que tudo esteja pronto para o que você deseja fazer no seu código ...
fonte
1) Você pode usar a API F etch para buscar dados dos Endd Points:
Exemplo de busca de todos os
Github
repouso para um usuário2) Outra alternativa é Axios
Agora você pode optar por buscar dados usando qualquer uma dessas estratégias em
componentDidMount
Enquanto isso, você pode mostrar a barra de progresso enquanto os dados estão sendo carregados
fonte
Você também pode buscar dados com ganchos nos componentes de função
exemplo completo com chamada da API: https://codesandbox.io/s/jvvkoo8pq3
segundo exemplo: https://jsfiddle.net/bradcypert/jhrt40yv/6/
fonte
Como o melhor local e prática para chamadas externas à API é o método React Lifecycle method componentDidMount () , onde após a execução da chamada da API você deve atualizar o estado local para acionar a nova chamada do método render () , as alterações no estado local atualizado serão ser aplicado na visualização do componente.
Como outra opção para a chamada de fonte de dados externa inicial no React, é apontado o método constructor () da classe. O construtor é o primeiro método executado na inicialização da instância do objeto componente. Você pode ver essa abordagem nos exemplos de documentação para componentes de ordem superior .
O método componentWillMount () e UNSAFE_componentWillMount () não devem ser usados para chamadas de API externas, porque elas devem ser descontinuadas. Aqui você pode ver os motivos mais comuns pelos quais esse método será descontinuado.
De qualquer forma, você nunca deve usar o método render () ou o método chamado diretamente de render () como um ponto para chamada de API externa. Se você fizer isso, seu aplicativo será bloqueado .
fonte
Uma maneira limpa é fazer uma chamada de API assíncrona dentro do componentDidMount com a função try / catch .
Quando chamamos uma API, recebemos uma resposta. Em seguida, aplicamos o método JSON nele, para converter a resposta em um objeto JavaScript. Em seguida, extraímos desse objeto de resposta apenas o objeto filho chamado "results" (data.results).
No começo, definimos "userList" no estado como uma matriz vazia. Assim que fazemos a chamada da API e recebemos dados dessa API, atribuímos os "resultados" a userList usando o método setState .
Dentro da função render, dizemos que userList será proveniente do estado. Como o userList é um conjunto de objetos, mapeamos através dele, para exibir uma imagem, um nome e um número de telefone de cada objeto "usuário". Para recuperar essas informações, usamos notação de ponto (por exemplo, user.phone).
NOTA : dependendo da sua API, sua resposta pode parecer diferente. Console.log toda a "resposta" para ver de quais variáveis você precisa e depois atribuí-las em setState.
UserList.js
fonte
Seria ótimo usar axios para a solicitação da API, que suporta cancelamentos, interceptores etc. Junto com os axios, eu uso o react-redux para gerenciamento de estado e o redux-saga / redux-thunk para os efeitos colaterais.
fonte