调用 useEffect 后组件未更新

Question

我正在尝试使用模式从我的数据库中删除一个项目，然后显示剩余的项目列表。

一切正常，我的项目被正确删除，但我的组件仅在我导航到它时更新，在我的模式关闭后它不会更新。

我希望我的组件在模式关闭后刷新。

这是我的代码：
我的模式：

<Modal visible={modalOpen} transparent={true} animationType='fade'>
  <View>
    <TouchableOpacity onPress={() => deleteMachineFunction()}>
         <Text style={styles.delete}>Delete</Text>
    </TouchableOpacity>
  </View>
</Modal>

我的 deleteMachineFunction() 在按下 'Delete'

后被调用

    const deleteMachineFunction = () => {
        dispatch(deletemachine(machineId))

        firebase.firestore()
        .collection('users')
        .doc('WDaEyHg9wMhqFjqA1zzeYaD6sts1')
        .update({
            userMachineList: firebase.firestore.FieldValue.arrayRemove(machineId)
        })
        //close modalle modal
        setModalOpen(false)
    }

以上，我的模态 useState (modalOpen, setModalOpen) 正在将 true 更新为 false。

这是我的 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]);

我想通过将 modalOpen 放在 useEffect 数组中，我的组件将在 modalOpen 变为 false 后自动更新，但它不起作用。

谁能告诉我我做错了什么？

Answer 1

如果你只想在模式关闭和打开时更新数据，那么你的useEffect()函数可以这样写：

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])

每次打开或关闭模式时，它都会从 firebase 获取新数据，我不明白你为什么添加此功能作为导航的焦点侦听器。

Answer 2

由于您调用 get()，您只获取了一次数据。如果之后更新数据，您的 setCloudUserMachineList 将不会更新。

如果要listen for updates数据，使用onSnapshot代替get():

useEffect(() => {
    firebase.firestore()
    .collection("users")
    .doc('WDaEyHg9wMhqFjqA1zzeYaD6sts1')
    .onSnapshot((snapshot) => { // 
        if(snapshot.exists){
           setCloudUserMachineList(snapshot.data().userMachineList)
        } else {
            console.log('not working')
        }
    })
}, [modalOpen])

调用 useEffect 后组件未更新

Component not updating after useEffect call

javascript

firebase

reactjs

google-cloud-firestore