1

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.

2
  • Só pra esclarecer, você realmente quer que ele faça esse tanto de pesquisas? Não quer que ele cancele as que não foram completadas e também usar um debounce? Commented 28/08/2021 às 13:23
  • Na realidade, eu exibiria mais informações que estas, em uma tabela, mas também cada requisição não seria iniciada tão rapidamente, pois o usuário irá digitar um código de 7 dígitos e pressionar enter para iniciar a requisição. Não seria tão rápido quanto apenas clicar e gerar um código sequencial como o exemplo acima. Na implementação original, faço um cancel mas apenas caso o usuário informe um mesmo código mais de uma vez, então cancelo a requisição anterior caso ela não tenha terminado. As informações exibidas de todas as requisições são importantes para analise e comparação pelo usuário.
    – Israel
    Commented 29/08/2021 às 0:20

0

Você deve fazer log-in para responder a esta pergunta.

Pesquise outras perguntas com a tag .