Voy a actualizar mi código para el formulario modular Firebase versión 9. Ahora estoy usando onValue. Por lo que estoy leyendo, devuelve una función que elimina el oyente. Pero todavía no lo estoy haciendo bien porque, aunque funciona bien al principio, cuando cambio la base de datos en el backend con la aplicación abierta, aparece el error "no se puede realizar una actualización de estado de reacción en un componente desmontado". m en una pantalla de aplicación diferente. Vea el código antiguo y el nuevo a continuación, por favor.

CÓDIGO ANTIGUO:

 useEffect(() => { loadListings(); },[]); const loadListings = async () => { setLoading(true); updateInput(''); let testData = []; let searchData = []; db.ref('deals').once('value', (snapshot) =>{ snapshot.forEach((child)=>{ testData.push({ id: child.key, title: child.val().hasOwnProperty('title') ? child.val().title : 'NA', }) searchData.push( child.val().title ) }) }) .then(()=>{ checkMessages(testData); setLoading(false); }) .catch((error) => Sentry.Native.captureException('Error MessagesScreen function loadListings 1 ' + error)); }

NUEVO CÓDIGO:

 useEffect(() => { loadListings(); },[]); const loadListings = async () => { setLoading(true); updateInput(''); const dbRef = ref(db, 'deals'); return onValue(dbRef , (snapshot) => { let testData = []; let searchData = []; let storeData = filterStores; snapshot.forEach((childSnapshot)=>{ testData.push({ id: childSnapshot.key, title: childSnapshot.val().hasOwnProperty('title') ? childSnapshot.val().title : 'NA', }) }) checkMessages(testData); setLoading(false); }) }

Después de recibir la respuesta a continuación, cambié useEffect a esto y ahora funciona:

 useFocusEffect( React.useCallback( () => { async function fetchData() { // You can await here const response = await loadListings(); // ... return () => response(); } fetchData(); }, []) );