Seu acesso ao AsyncStorage
está num loop infinito porque você está realizando essa acesso no corpo do seu componente funcional, ou seja, a cada renderização você está obtendo o dado do AsyncStorage
, atualizando o state e realizando um novo acesso (loop).
Realizei um exemplo abaixo da chamada de uma função assíncrona (com setTimeOut
) sendo executada no corpo da função se show === true
:
function Componente() {
const [date, setDate] = React.useState('');
const [show, setShow] = React.useState(false);
React.useEffect(() => {
setShow(true);
}, []);
function getDateAsync() {
setTimeout(function() {
console.log('Leitura assíncrona realizada');
const now = (new Date()).toString();
setDate(now);
}, 1000);
}
if (show) {
getDateAsync();
}
console.log("[RENDER] show:", show);
return date ? <p>Data obtida: {date}</p> : <p>Carregando...</p>;
}
ReactDOM.render( <Componente /> , document.querySelector("#app"));
<script crossorigin src="https://unpkg.com/react@16/umd/react.production.min.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js"></script>
<div id="app"></div>
Pare resolver isso, a solução ideal é fazer uso do Hook useEffect
:
O que o useEffect faz? Usando esse Hook, você diz ao React que o componente precisa fazer algo apenas depois da renderização.
Então faremos um useEffect
que será chamado sempre que mudar o estado de show
, mas queremos executar o getDateAsync()
apenas se show
for true
, então criamos uma condição também:
function Componente() {
const [date, setDate] = React.useState('');
const [show, setShow] = React.useState(false);
React.useEffect(() => {
setShow(true);
}, []);
React.useEffect(() => {
// Criando uma função desta maneira, você pode inclusive fazer uso de
// async/await para obter o resultado do AsyncStorage.
function getDateAsync() {
setTimeout(function() {
console.log('Leitura assíncrona realizada');
const now = (new Date()).toString();
setDate(now);
}, 1000);
}
if (show) {
getDateAsync();
}
}, [show]);
console.log("[RENDER] show:", show);
return date ? <p>Data obtida: {date}</p> : <p>Carregando...</p>;
}
ReactDOM.render( <Componente /> , document.querySelector("#app"));
<script crossorigin src="https://unpkg.com/react@16/umd/react.production.min.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js"></script>
<div id="app"></div>
Repare que quase não houve mudanças no código, mas dessa maneira fazemos um bom uso dos Hooks e o código executa o comportamento esperado pelo usuário.
useEffect()
, se ficar no corpo da função (componente), vai executar em cada render (e causará um novo render por causa dosetPedido
)