TransWikia.com

useState não atualiza - ReactJS

Stack Overflow em Português Asked by LUCAS MICHEL DA SILVA on September 26, 2021

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

3 Answers

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])

Answered by Douglas on September 26, 2021

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/

Answered by Gabriel Stein on September 26, 2021

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

Answered by novic on September 26, 2021

Add your own answers!

Ask a Question

Get help from others!

© 2024 TransWikia.com. All rights reserved. Sites we Love: PCI Database, UKBizDB, Menu Kuliner, Sharing RPP