Aquí está mi código. Estoy tomando datos de firebase y colocándolos en mi groupDataMap .
const Home = () => { const [memberInfo, setMemberInfo] = useState(''); const auth = getAuth(); const user = auth.currentUser; const memberId = auth.currentUser.uid const db = getDatabase(); const dbRef = ref(db, 'groups'); let groupDataMap = {}; //get group name's if member_id(user) matches member id onValue(dbRef, (snapshot)=> { const data = snapshot.val(); for(var key in data){ if(data.hasOwnProperty(key)){ const groupname = data[key] groupDataMap = groupname } } }) setMemberInfo(groupDataMap) Estoy usando memberInfo para completar un elemento <li> en mi declaración:
return ( <div> <div class="brand"> <h1>Headline</h1> <p>paragraph</p> </div> <ul class="list-group container-fluid"> <li class="list-group-item"> {memberInfo} </li> </ul> </div> );¿No estoy simplemente configurando el estado una vez?
¿No estoy simplemente configurando el estado una vez?
No, se va a llamar a setMemberInfo una y otra vez para que el componente se represente infinitamente.
Lee sobre el gancho useEffect .
const [memberInfo, setMemberInfo] = useState(''); const auth = getAuth(); const user = auth.currentUser; const memberId = auth.currentUser.uid useEffect(() => { const db = getDatabase(); const dbRef = ref(db, 'groups'); let groupDataMap = {}; //get group name's if member_id(user) matches member id onValue(dbRef, (snapshot)=> { const data = snapshot.val(); for(var key in data){ if(data.hasOwnProperty(key)){ const groupname = data[key] groupDataMap = groupname } } }) setMemberInfo(groupDataMap) }, []);Sugerencia: Refiera este caso similar a su pregunta
Tendrá que usar el gancho useEffect de reaccionar para establecer el estado.