Reactjs 如何创建设置异步侦听器的react钩子？

如何创建需要设置异步事件侦听器的挂钩。本质上，我使用的是一个带有

listen

函数的库，该函数向函数返回一个对事件

unlisten

的承诺

因此，我试图设置一个useEvent挂钩，它接受事件发生时调用的eventName和callback

我想要的是这样的东西：

const useEvent = (eventName, callback) => {
  useEffect(() => {
    const unlisten = await listen(eventName, callback);
    return unlisten
  }
}

但是我不能轻易地将wait封装在一个内部异步函数中，因为我需要返回值

---

我该怎么办？

您可以预先声明承诺，然后等待它不是在main effect回调主体中解决，而是在cleanup函数中解决：

const useEvent = (eventName, callback) => {
    useEffect(() => {
        const unlistenProm = listen(eventName, callback);
        return () => {
            unlistenProm.then((unlisten) => {
                unlisten();
            }); // .catch(handleErrors); // ?
        }
    }, [eventName, callback]);
};

---

eventName

和

callback

需要添加到

useEffect

dependency的

dependency数组软件中，该软件需要使用
useCallback
创建以减少不必要的更新。