2

Estou iniciando no mundo do ReactJS. Tenho um front que está consumindo uma API de rastreamento, para isso ele me retorna um objeto com status, responseMessage e object, um array de objetos. Faço a desestruturação da requisição e ele realiza o print normalmente no console. Porém no momento em que tento alterar o estado, ele não acusa nenhum erro mas também não altera o estado do componente.

  const dispatch = useDispatch();
  const [dados, setDados] = React.useState([]);

  React.useEffect(() => {
    async function loadData(){
      await dispatch(signInRequestMultiportal());
      const response = await apiMultiportal.request({
        url: 'posicoes/ultimaPosicao',
        method: 'post',
        headers: {
          token: store.getState().auth.tokenMultiportal,
        }
      });

      const { object } = response.data;
      console.log(object)
      setDados(object);
      console.log(dados);
    }
    loadData();
  }, [])
{
 "status": 'OK',
 "responseMessage": "Requisição concluida",
 "object": [{
 }]
}

Print do objeto, o de cima é o console.log(object) o de baixo o console.log(dados)

inserir a descrição da imagem aqui

7
  • se está falando que não altera também na tela ou so no console.log? console.log(dados);?:
    – novic
    Commented 6/07/2020 às 23:24
  • No console.log aparece os dados, mas no useState não Commented 6/07/2020 às 23:38
  • seu object ta vindo nada, tipo um array com 0 posições! se viu isso?
    – novic
    Commented 6/07/2020 às 23:42
  • No console.log(object) aparece todos os dados, porém no console.log(dados) simplesmente aparece um [ ] Commented 6/07/2020 às 23:46
  • se está confundindo as bolas, o console.log(data) não tem dados ainda levo um tempo para atualizar seguinte segue o exemplo abaixo que vou criar
    – novic
    Commented 6/07/2020 às 23:51

3 Respostas 3

4

A variável de estado precisa ser monitorada para que tenha as suas alterações e isso é fácilmente resolvido com a utilização de useEffect com um paramento de array contendo a sua variável a ser monitorada, um exemplo simples:

function App() {
  const [data, setData] = React.useState([]);

  const loadData = () => {
    let item = [];
    for(let i = 0; i < 10; i++) {
      item.push(i);
    }
    setData(item);
  }

  React.useEffect(() => {
    loadData();
  }, []);

  React.useEffect(() => { // esse é responsável em pegar as alterações
    console.log(data);
  }, [data]); // pela configuração no `array` com o nome da variável

  return (
    <div>      
      <ul>
      {data.map((i,k) => (<li>{i}</li>))}
      </ul>
    </div>
  )
}
ReactDOM.render(<App/> , document.getElementById('root'));
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.3/umd/react-dom.production.min.js"></script>
<div id="root"></div>

do jeito que você fez como a alteração não é percebida porque é assíncrona e por isso o uso o useEffect é necessário

1

Lucas, o useEffects é bem interessante, porém, se você não colocar nada no array do segundo argumento, ele vai executar uma única vez, colocando uma propriedade ali, ela vai executar toda vez que tiver uma alteração naquela variável.

const dispatch = useDispatch();
  const [dados, setDados] = React.useState([]);

  React.useEffect(() => {
    async function loadData(){
      await dispatch(signInRequestMultiportal());
      const response = await apiMultiportal.request({
        url: 'posicoes/ultimaPosicao',
        method: 'post',
        headers: {
          token: store.getState().auth.tokenMultiportal,
        }
      });

      const { object } = response.data;
      console.log(object)
      setDados(object);
      console.log(dados);
    }
    loadData();
  }, [dados]) // Apenas colocar a propriedade para ficar sendo observada

Fiz um exemplo no JSFiddle para melhor exemplificar caso ainda tenha ficado dúvida.

https://jsfiddle.net/gabrielgstein/4hwvo0Lj/3/

1

O que está acontecendo nesse caso é que quando useEffect é executado o valor de estado da variavel data é o valor inicial, se você adicionar a variavel data no array de dependencias o codigo vai executar como você espera.

React.useEffect(function loadData(){....}, [data])

porém a função loadData() sera executada duas vezes o que não é ideal. então você pode separar os console.log() em outro useEffect()

React.useEffect(()=>{console.log(data)}, [data])

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

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .