如何正确地将事件侦听器添加到 React useEffect 挂钩？答案

【问题标题】：How to correctly add event listener to React useEffect hook?如何正确地将事件侦听器添加到 React useEffect 挂钩？
【发布时间】：2021-03-31 21:36:33
【问题描述】：

我正在尝试将事件侦听器添加到 Autodesk Forge 查看器。这是一个基于 React 构建的应用程序，这是我正在尝试的代码：

  const selectEvent = () => {
    let viewer = window.NOP_VIEWER;
    viewer.addEventListener(Autodesk.Viewing.SELECTION_CHANGED_EVENT, (e) => {
      setSelection(e.dbIdArray);
    });
  };

当从按钮onClick 调用时，它可以完美运行：

<Button onClick={() => selectEvent()}>Add</Button>

但是，我希望在页面加载时打开事件监听器，所以我尝试了useEffect：

  useEffect(() => {
    let viewer = window.NOP_VIEWER;
    if (viewer) {
      selectEvent();
    }
  }, []);

即使尝试了一些修改，我也无法让它工作。什么都没有发生，所以我怀疑事件监听器永远不会被添加。环顾其他解决方案，事件侦听器通常加载useEffect，但我不确定我做错了什么。任何提示将不胜感激！

编辑：它确实输入了if 语句，因为console.log 有效

一些背景（可能相关）：查看器是从 useEffect 加载的

  useEffect(() => {
    initializeViewer(props);
  }, []);

并且可以如上面代码所示访问查看器。

【问题讨论】：

标签： javascript reactjs react-hooks autodesk-forge

【解决方案1】：

试试这个 NOP_VIEWER 是访问当前查看器的全局变量

监听后需要移除事件监听器，否则会导致内存泄漏

useEffect(()=>{
  NOP_VIEWER.addEventListener(Autodesk.Viewing.SELECTION_CHANGED_EVENT, (e) => {
      setSelection(e.dbIdArray);
    });
return()=>{NOP_VIEWER.removeEventListener(Autodesk.Viewing.SELECTION_CHANGED_EVENT, (e) => {
      setSelection(e.dbIdArray);
    }))}
},[])

或者如果它不起作用

useEffect(()=>{
  let viewer= window.NOP_VIEWER
  viewer.addEventListener(Autodesk.Viewing.SELECTION_CHANGED_EVENT, (e) => {
      setSelection(e.dbIdArray);
    });

},[])

【讨论】：

【解决方案2】：

尝试这样的事情。
当viewer 发生更改并且查看器可用时，您可以注册该事件。
将事件处理程序取消注册为挂钩的返回函数

useEffect(() => {
  if (viewer) {
    viewer.addEventListener(Autodesk.Viewing.SELECTION_CHANGED_EVENT, (e) => {
      setSelection(e.dbIdArray);
    });
  }
  return () => { /* do the removeEventLister */ }
}, [viewer]);

【讨论】：