Tenho a seguinte situação: um formulário com um único input e uma lista com resultados que serão exibidos em tela. A ideia é que o usuário informe um código no input, e ao alterar o valor do input deve ser realizada uma consulta utilizando o AXIOS, através do método GET. Esta consulta deverá ser realizada toda vez que o valor do input for modificado, podendo assim ser gerada várias requisições em paralelo, porém gerada uma após a outra, e não gerada simultaneamente. Vejam o código inicial para explicar melhor o problema:
import React, { useState, useEffect } from 'react';
import axios from 'axios';
export default function App() {
const [id, setId] = useState(0);
const [users, setUsers] = useState([]);
const addUser = (user) => {
setUsers([user, ...users]);
}
const onChangeInput = e => {
setId(e.target.value);
};
const getUser = userId => {
return axios.get(`https://jsonplaceholder.typicode.com/users/${userId}`);
};
useEffect(() => {
if (id) {
getUser(id)
.then(response => {
addUser(response.data)
})
.catch(err => console.error(err))
}
}, [id]);
return (
<>
<div>
<input type="number" value={id} onChange={e => onChangeInput(e)} />
</div>
<ul>
{
users.map(u => <li key={u.id}>{ u.name }</li> )
}
</ul>
</>
);
}
O problema neste código é que ao realizar uma consulta via GET, e executar uma próxima consulta antes da primeira ou anterior terminar, perco a RESPOSTA da requisição anterior. Neste exemplo, basta ir alterando os códigos do input clicando na "seta para cima" para mudar os códigos rapidamente (passando rapidamente pelos números 1,2,3,4 ...) e perceberem o resultado. Se consultarmos os 5 primeiros usuários rapidamente, alguns não serão exibidos (a depender do quanto rápido foram as alterações e tempo de resposta para cada uma delas)
Bem, gostaria que, toda vez que modificado o valor do input e gerado uma requisição para cada alteração fosse exibido em tela a informação "CARREGANDO..." até que as RESPOSTA seja de fato carregada, e em paralelo com outras requisições. Para isso, fiz algumas modificações, chegando na seguinte situação:
import React, { useState, useEffect } from 'react';
import axios from 'axios';
export default function App() {
const [id, setId] = useState(0);
const [userResponses, setUserResponses] = useState([]);
const addUserResponse = (userLoader) => {
setUserResponses([userLoader, ...userResponses]);
}
const onChangeInput = e => {
setId(e.target.value);
};
const getUser = userId => {
return axios.get(`https://jsonplaceholder.typicode.com/users/${userId}`);
};
const searchUser = (userId) => {
let userResponse = {
id: userId,
loading: true,
data: null,
error: null,
promise:
getUser(userId)
.then(response => {
console.log("this", this);
this.loading = false;
this.data = response.data;
return this.data;
})
.catch(err => {
console.error(err);
this.error = err;
})
}
return userResponse;
}
useEffect(() => {
if (id) {
let ur = searchUser(id);
addUserResponse(ur);
}
}, [id]);
return (
<>
<div>
<input type="number" value={id} onChange={e => onChangeInput(e)} />
</div>
<ul>
{
userResponses.map(u => <li key={u.id}>{ u.loading ? "loading... " : u.data.name }</li> )
}
</ul>
</>
);
}
Nesta implementação criei o método searchUser que retorna um objeto no seguinte formato:
let userResponse = {
id: ...,
loading: ...,
data: ...,
error: ...,
promise: ...
}
Como executo uma REQUISIÇÃO dentro do atributo "promise", tento alterar os valores de loadint, data e error usando a palavra-chave "this", mas neste trecho de código ela fica como "undefined".
Na renderização da lista, trecho com o seguinte código
userResponses.map(u => <li key={u.id}>{ u.loading ? "carregando... " : u.data.name }</li> )
sempre aparece "CARREGANDO..", fazendo sentido, já que houve erro na execução do método serachUser por "this" estar como "undefined".
Bem, poderiam me ajudar como resolver esta situação? ou alguma alternativa mais elegante?
Os exemplos acima podem ser vistos em:
https://stackblitz.com/edit/react-vkwv2m
https://stackblitz.com/edit/react-3rwwdv
Obs 1: este é um exemplo que simplifiquei aqui, para não ter que exibir um código tão complexo e exaustivo.
Obs 2: utilizei um end point para testes da jsonplaceholder (https://jsonplaceholder.typicode.com/users/:id), e só possui 10 ids, com valores de 1 a 10, o suficiente para a demonstração.