等待操作后导航 addListener 不执行答案

【问题标题】：Navigation addListener does not executes after await action等待操作后导航 addListener 不执行
【发布时间】：2021-12-04 21:43:27
【问题描述】：

我正在使用 @react-navigation^5.x.x 在 React Native 中收听关于导航的焦点事件在componentDidMount。如果只写了这个动作，那么它运行良好并执行其中的代码。

但就我而言，我从 API 获取数据（也尝试通过模拟 await）并在添加焦点侦听器之前使用 await。这不是第一次听。但是当我转到另一个页面并返回时，它开始工作/执行。

这是我的代码 sn-p。

async componentDidMount() {
    
    await new Promise(resolve => setTimeout(resolve, 3000)); // 3 sec

    navigation.addListener('focus', async (data) => {
        console.log('This block not works for first time when I come on page.')
    })

}

编辑 - 即使我删除 await 并将整个块置于超时状态，它也会停止执行焦点回调。

【问题讨论】：

这不仅仅是任何回调，它是一个事件监听器。您收听“焦点”事件，它会在事件触发时调用您的侦听器。如果您等待/延迟将侦听器添加到“焦点”事件已经触发的时间，您的侦听器将不会被调用。
哦，好像是这样。但是当焦点事件被触发时，我需要使用一些数据。我正在从 API 获取这些数据。我应该怎么做才能触发它并且我可以使用来自 API 的数据？
它不能等待在您从 API 获取数据之后触发，事件不会那样工作。为什么在获取数据后需要它触发？用例是什么？

标签： javascript react-native async-await react-navigation react-navigation-v5

【解决方案1】：

我不认为你可以在生命周期中使用async 试试这个：

componentDidMount() {
    const getData = async (params) => {
        await new Promise(resolve => setTimeout(resolve, 3000)); // 3 sec

        navigation.addListener('focus', async (data) => {
            console.log('This block not works for first time when I come on page.')
        })

    }
    getData()
}

【讨论】：

或者你可以使用.then方法
两种方法我都试过了，不知道为什么会停止监听react导航的焦点效果。
可能是因为 navigation.addListener() 返回了一个 unsub 函数，你用 useEffect hook 试过了吗？还有一个叫 useFocusEffect 的 react hook
知道如何解决我的问题吗？