如何在 useEffect 中使用事件监听器？答案

【问题标题】：How do I use an event-listener inside useEffect?如何在 useEffect 中使用事件监听器？
【发布时间】：2021-03-09 18:50:40
【问题描述】：

我正在尝试将一些代码从 React Native 类组件移动到功能组件中。原始代码如下所示：

componentDidMount(){
this.state.broadcastSubscriber = DeviceEventEmitter.addListener('event', (intent) =>{ this.broadcastReciever(intent)});
}

到目前为止，我尝试过的是以下几种不同的排列方式：

useEffect(() => {
  const broadcastSubscriber = DeviceEventEmitter.addListener('event', (intent) =>{ broadcastReciever(intent)});
    }}, []);

包括使 broadcastReciever 成为 useCallback 函数。到目前为止，尽管 broadcastReciever 从未在 useEffect 中首次运行时听到任何消息。

谁能指出我做错了什么？谢谢。

PS：我知道 DeviceEventEmitter 已贬值。

【问题讨论】：

标签： react-native react-hooks

【解决方案1】：

尝试以下方法：

const broadcastReciever = (intent)=>{ //do you intent code here}

useEffect(() => {
  DeviceEventEmitter.addListener('event', broadcastReciever);
  return DeviceEventEmitter.removeListener('event', broadcastReciever);
}}, []);

【讨论】：

【解决方案2】：

你可以像这样在 useEffect 中添加事件监听器

useEffect(() => {
   
    const loads = props.navigation.addListener('didFocus', () => {
      //do something here on Listner
    });
    return () => {
        loads
    }}, [props.navigation]);

【讨论】：

你确定这个依赖是必需的吗，props.navigation？
导航事件监听器需要