时间戳

首页 > 解决方案 > 如何正确地将事件侦听器添加到 React useEffect 挂钩？

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

问题描述

我正在尝试将事件侦听器添加到 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);
  }, []);

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

标签： javascriptreactjsreact-hooksautodesk-forge

解决方案

尝试这样的事情。
当有任何变化viewer并且查看器可用时，您就可以注册该事件。
将事件处理程序取消注册为挂钩的返回函数

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

推荐阅读