Question

我正在尝试向 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);
  }, []);

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

Answer 1

试试这样的事情。
当 viewer 发生变化并且查看器可用时，您就可以注册该事件。
取消注册事件处理程序作为钩子的返回函数

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

Answer 2

试试这个 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);
    });

},[])

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

2 个答案: