Boa tarde, estou tentando listar uma lista de usuários do banco de dados firebase, porém ela não está carregando quando inicia o aplicativo ou quando pressiono “RR” no emulador do android studio, já tentei no meu celular e a mesma coisa acontece, nada é carregado list.length = 0, porém se eu der um ctrl+s no vscode a lista é carregada duplicada, pra resolver o problema da duplicação coloquei um if(list.length < 1){carrega lista}, apesar da lista carregar sem duplicar agora, o bug de não carregar ao inicio ou no refresh pelo “RR” ainda continua, desconfio que o problema seja a utilização do list.push() no código, deveria utilizar setList(), porém ele só iria executar na última execução do snapshot.forEach() e só iria preencher com 1 usuário a minha lista, mesmo assim andei pesquisando e vi que usar o setList() dentro de um loop era uma má pratica e que não deveria acontecer, então o que eu poderia fazer para consertar o bug e listar os usuários?
Código atual:
import React, { useState, useEffect } from 'react';
import { View, Text, FlatList, ActivityIndicator } from 'react-native';
import { firebase } from '@react-native-firebase/database';
export default function App(){
const [list, setList] = useState([]);
const [load, setLoad] = useState(true);
useEffect(()=>{
async function loadList(){
if(list.length < 1){
let ref = await firebase.database().ref('usuarios');
const listener = await ref.on('value', (snapshot)=>{
snapshot.forEach((childItem)=>{
let key = childItem.key;
let nome = snapshot.child(key).val().nome;
let idade = snapshot.child(key).val().idade;
list.push({ key, nome, idade });
});
return () => listener()
});
setLoad(false);
}
}
loadList();
}, []);
if(load){
return <ActivityIndicator size='large' color='#CCC'/>
}else{
return (
<View>
<FlatList
data={list}
renderItem={({item})=><Text>{item.nome}</Text>}
/>
</View>
);
}
}