React自定义useGA钩子重复触发致GA数据重复上报问题排查

问题背景 #

我们在React应用中通过自定义useGA钩子向Google Analytics上报数据，为避免重复上报，引入marker字符串对比机制：每次钩子调用时生成新marker，与旧marker对比，不同则上报并更新marker。但实际运行中钩子触发4次，前两次trackedMarker未及时更新，导致相同数据被重复上报两次，需排查原因。

注：已根据@Keith和@ramkumar2098的建议更新问题与代码。

现象观察 #

通过console.log输出发现：

• useEffect共触发4次
• 前两次trackedMarker为空，newMarker值正确，但setTrackedMarker未及时生效
• 后两次trackedMarker与newMarker值一致

相关代码 #

useGA钩子代码 #

export const useGA = (
  someKey: string,
  results: readonly Readonly<OurResultType>[],
): void => {
  const [trackedMarker, setTrackedMarker] = useState('');
  const gtm = useGoogleTagManager();

  useEffect(() => {
    console.log('Effect called!'); // 页面加载时调用4次
    const newMarker = someKey + results.map((r) => r.id).join(',');

    console.log('Tracked marker: ' + trackedMarker); // 前两次为空
    console.log('New marker:     ' + newMarker); // 每次值都正确

    if (trackedMarker !== newMarker) {
      setTrackedMarker(newMarker);
      gtm.push(...);
      console.log('Pushed!');
    }
    console.log('New tracked marker: ', trackedMarker); // 前两次为空，后两次值正确
  }, [someKey, results, trackedMarker, gtm]);
};

使用钩子的组件代码 #

export const OurComponent: React.FC<OurComponentProps> = ({
  someKey,
}) => {
  ...
  useGA(someKey, results);
  ...
}

上层组件代码 #

export const SomeUpperComponent: React.FC<SomeUpperComponentProps> = ({
  hasResults,
  someKey,
}) => {
  ...
  return hasResults ? <OurComponent someKey={someKey} /> : <NoResults />;
};

日志输出 #

第1次调用 #

Effect called!
Tracked marker:
New marker: 9018a12a-6cd1-4020-91ca-a05a3a81f1744,2,5,3,1,8,7,6,9,10
New tracked marker:
Pushed!

第2次调用 #

Effect called!
Tracked marker:
New marker: 9018a12a-6cd1-4020-91ca-a05a3a81f1744,2,5,3,1,8,7,6,9,10
New tracked marker:
Pushed!

第3次调用 #

Effect called!
Tracked marker:
New marker: 9018a12a-6cd1-4020-91ca-a05a3a81f1744,2,5,3,1,8,7,6,9,10
New tracked marker: 9018a12a-6cd1-4020-91ca-a05a3a81f1744,2,5,3,1,8,7,6,9,10

第4次调用 #

Effect called!
Tracked marker:
New marker: 9018a12a-6cd1-4020-91ca-a05a3a81f1744,2,5,3,1,8,7,6,9,10
New tracked marker: 9018a12a-6cd1-4020-91ca-a05a3a81f1744,2,5,3,1,8,7,6,9,10

核心问题分析 #

useEffect多次触发，第二次调用时marker仍不一致，导致重复上报。初步判断是组件多次挂载、状态未及时更新所致。

致谢 #

• @ramkumar2098：指出console.log使用+而非,导致日志显示问题
• @Keith：建议排查组件挂载次数，帮助完善问题描述

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