Soy nuevo para reaccionar nativo. Tengo un problema al actualizar los datos (latitud, longitud, marca de tiempo) para cada usuario (miembro) en la base de datos de Firebase en tiempo real, obtengo bucles interminables
El error tengo "demasiada recursividad"
firebase.config.ts
const firebaseConfig = { ... }; export const getCurrentLocation = (phoneNumber: number, setData: (locationParams: any) => void) => { const db = getDatabase(); const reference = ref(db, 'members/' + phoneNumber); onValue(reference, (snapshot) => { const data = snapshot.val(); setData(data); }) }; export const setCurrentLocation = (phoneNumber: number, latitude: number, longitude: number, timestamp: number) => { const db = getDatabase(); const reference = ref(db, 'members/' + phoneNumber); set(reference, { latitude: latitude, longitude: longitude, timestamp: timestamp, }).then(() => console.log('setCurrentLocation to mainUser/firebase.config')); }; const app = initializeApp(firebaseConfig);
listamiembros.tsx
const [userPhoneNumber, setUserPhoneNumber] = useState('0'); const members = useSelector((state: any) => state.members); //get user's phoneNumber const auth = getAuth(); useEffect( ()=> { onAuthStateChanged(auth, (user) => { if (user) { setUserPhoneNumber(user.email.replace(/\D/gi, '') || ''); } else { console.log('logged out') } }); }, []) useEffect(() => { const timer = setInterval( () => { members.map(function (el) { getCurrentLocation(el.phoneNumber, (locationParams: any) => { let timestamp = new Date().getTime()/1000; setCurrentLocation(el.phoneNumber, locationParams.latitude, locationParams.longitude, timestamp) }) }) }, 10000); return () => clearInterval(timer); }, []);
Esto se ve mal:
const timer = setInterval( () => { members.map(function (el) { getCurrentLocation(el.phoneNumber, (locationParams: any) => { let timestamp = new Date().getTime()/1000; setCurrentLocation(el.phoneNumber, locationParams.latitude, locationParams.longitude, timestamp) }) }) }, 10000);
Dado que su getCurrentLocation
adjunta un oyente con onValue
, solo hacer eso una vez para cada usuario ejecutará su llamada setData
de inmediato para el valor actual en la base de datos, y nuevamente cada vez que se actualicen los datos de ese usuario . Combinar onValue
con un temporizador de intervalo es un antipatrón en Firebase, la base de datos ya vuelve a llamar a su código cuando cambian los datos. En este momento, adjunta un nuevo oyente para cada usuario cada segundo, por lo que si hay una actualización de los datos de un usuario después de más de unos segundos, su devolución de llamada (y setData
) se llamará con mucha más frecuencia de lo necesario.
En Firebase, adjunte sus oyentes una vez (generalmente cuando se carga la página) y déjelos continuar trabajando hasta que la página se descargue (o se necesiten otros cambios en los oyentes).
Entonces, si elimina el setInterval
del código, debería obtener mejores resultados.