React中useEffect绑定GPT事件监听器时回调重复触发且参数混乱

问题根源 #

你遇到的核心问题是：window.googletag.pubads()是全局共享的实例，每个Ad组件都给这个全局实例注册了slotOnload事件回调。当任何一个广告位触发slotOnload事件时，所有注册在全局pubads上的回调都会执行，这就导致每个slot触发时，所有display参数的回调都跑一遍，出现slot-1拿到partial参数的情况。

解决方案 #

要解决这个问题，需要给单个slot实例绑定slotOnload监听器（而非全局pubads），同时在组件卸载时移除监听器避免内存泄漏。

修改后的代码 #

<div id="app"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/18.2.0/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/18.2.0/umd/react-dom.production.min.js"></script>
<script src="https://securepubads.g.doubleclick.net/tag/js/gpt.js"></script>

const { useEffect } = React;

const slotOnloadCallback = (display, event) => {
  const { slot } = event;
  console.log(`callback called for slot ${slot.getSlotElementId()} - display: ${display}`);
};

const create = (id, display) => {
  window.googletag = window.googletag || { cmd: [] };
  
  // 存储slot实例，用于后续移除监听器
  let slotInstance = null;

  window.googletag.cmd.push(function() {
    slotInstance = window.googletag.defineSlot('/1234567/example', [728, 90], id);
    slotInstance.addService(googletag.pubads());
    window.googletag.pubads().enableSingleRequest();
    window.googletag.enableServices();

    // 给当前slot实例绑定监听器，而非全局pubads
    const boundCallback = slotOnloadCallback.bind(null, display);
    slotInstance.addEventListener("slotOnload", boundCallback);
  });

  window.googletag.cmd.push(function() {
    window.googletag.display(id);
  });

  // 返回清理函数，用于组件卸载时移除监听器
  return () => {
    if (slotInstance) {
      const boundCallback = slotOnloadCallback.bind(null, display);
      slotInstance.removeEventListener("slotOnload", boundCallback);
    }
  };
}

const Ad = (props) => {
  const { id, display } = props;
  console.log(`Ad ${id}: Rendering`);
  
  useEffect(() => {
    console.log(`Ad ${id}: Mounted`);
    const cleanup = create(id, display);
    
    // 组件卸载时执行清理
    return cleanup;
  }, [id, display]); // 添加依赖，确保props变化时重新创建（可选，根据业务需求调整）
  
  return (
    <div id={id}></div>
  );
};

function App() {
  return (
    <div>
      <Ad 
        id="slot-1"
        display="full"
      />
      <p>...</p>
      <Ad
        id="slot-2"
        display="partial"
      />
    </div>
  )
}

ReactDOM.render(<App />, document.querySelector("#app"));

关键修改说明 #

1. 绑定到单个slot实例：在创建slot后，直接给slotInstance添加slotOnload监听器，确保只有当前slot触发事件时，对应的回调才会执行。
2. 添加清理逻辑：create函数返回一个清理函数，在useEffect的返回值中调用，组件卸载时移除对应slot的监听器，避免内存泄漏和无效回调执行。
3. 调整useEffect依赖：将id和display加入依赖数组，确保props变化时重新创建广告位（如果业务需要支持props更新，可根据实际情况调整）。

修改后，每个slot触发slotOnload时，只会执行对应组件绑定的回调，输出会变成：

"Ad slot-1: Rendering"
"Ad slot-2: Rendering"
"Ad slot-1: Mounted"
"Ad slot-2: Mounted"
"callback called for slot slot-1 - display: full"
"callback called for slot slot-2 - display: partial"

内容的提问来源于stack exchange，提问作者user10650826