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)
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.
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
Get help from others!
Recent Answers
Recent Questions
© 2024 TransWikia.com. All rights reserved. Sites we Love: PCI Database, UKBizDB, Menu Kuliner, Sharing RPP