Estoy tratando de eliminar un artículo de mi base de datos usando un modal y luego muestro la lista de artículos restantes.
Todo funciona, mi elemento se elimina correctamente, pero mi componente se actualiza solo cuando navego hacia él, no se actualiza después de que se cierra mi modal.
Quiero que mi componente se actualice después de que se cierre mi modal.
Aquí está mi código:
Mi modal:
<Modal visible={modalOpen} transparent={true} animationType='fade'> <View> <TouchableOpacity onPress={() => deleteMachineFunction()}> <Text style={styles.delete}>Delete</Text> </TouchableOpacity> </View> </Modal>mi deleteMachineFunction() que se llama después de presionar 'Eliminar'
const deleteMachineFunction = () => { dispatch(deletemachine(machineId)) firebase.firestore() .collection('users') .doc('WDaEyHg9wMhqFjqA1zzeYaD6sts1') .update({ userMachineList: firebase.firestore.FieldValue.arrayRemove(machineId) }) //close modalle modal setModalOpen(false) } Entonces, arriba, mi useState modal ( modalOpen , setModalOpen ) se está actualizando de verdadero a falso.
Aquí está mi gancho useEffect:
useEffect(() => { const unsubscribe = navigation.addListener('focus', () => { firebase.firestore() .collection("users") // .doc(firebase.auth().currentUser.uid) .doc('WDaEyHg9wMhqFjqA1zzeYaD6sts1') .get() .then((snapshot) => { if(snapshot.exists){ setCloudUserMachineList(snapshot.data().userMachineList) } else { console.log('not working') } }) }); // Return the function to unsubscribe from the event so it gets removed on unmount return unsubscribe; }, [navigation, modalOpen]); Estaba pensando al poner modalOpen en la matriz useEffect, mi Componente se actualizará automáticamente después de que modalOpen cambie a falso pero no funciona.
¿Alguien puede decirme qué estoy haciendo mal?
Como llamas a get() , solo obtienes los datos una vez. Si los datos se actualizan después de eso, su setCloudUserMachineList no se actualizará.
Si desea escuchar las actualizaciones de los datos, use onSnapshot en lugar de get() :
useEffect(() => { firebase.firestore() .collection("users") .doc('WDaEyHg9wMhqFjqA1zzeYaD6sts1') .onSnapshot((snapshot) => { // 👈 if(snapshot.exists){ setCloudUserMachineList(snapshot.data().userMachineList) } else { console.log('not working') } }) }, [modalOpen])si desea actualizar los datos solo en el cierre y apertura modal, entonces su función useEffect() se puede escribir así:
useEffect(() => { firebase.firestore() .collection("users") // .doc(firebase.auth().currentUser.uid) .doc('WDaEyHg9wMhqFjqA1zzeYaD6sts1') .get() .then((snapshot) => { if(snapshot.exists){ setCloudUserMachineList(snapshot.data().userMachineList) } else { console.log('not working') } }) }, [modalOpen])obtendrá datos nuevos de firebase cada vez que se abra o cierre el modal y no entiendo por qué agregó esta funcionalidad como oyente de enfoque a la navegación.