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

Posted 2023-03-16

【中文标题】如何正确地将事件侦听器添加到 React useEffect 挂钩？

【英文标题】：How to correctly add event listener to React useEffect hook?

【发布时间】：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);
  , []);

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

【参考方案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]);