useEffect执行后访问第三方库出现Cannot read properties of undefined错误

组件首次渲染时window.truste还未挂载，直接访问会触发Cannot read properties of undefined错误，用固定延迟的setTimeout不够严谨，以下是几种更可靠的解决方法：

1. 轮询检测（灵活可控） #

设置定时器定期检查window.truste是否存在，一旦检测到目标属性就绪就执行逻辑并清除定时器，避免无效轮询：

useEffect(() => {
  const checkTrusteeReady = () => {
    // 逐层判断属性是否存在，避免报错
    if (window.truste?.eu?.bindMap) {
      const state = window.truste.eu.bindMap.state;
      if (validStates.includes(state)) {
        setValidState(true);
      }
      clearInterval(intervalId);
    }
  };

  // 每100毫秒检查一次，可根据实际情况调整间隔
  const intervalId = setInterval(checkTrusteeReady, 100);

  // 组件卸载时清除定时器，防止内存泄漏
  return () => clearInterval(intervalId);
}, [validStates]);

2. MutationObserver监听属性变更 #

利用MutationObserver监听window对象的属性变化，当truste属性被挂载时立即执行逻辑：

useEffect(() => {
  const observer = new MutationObserver((mutations) => {
    for (const mutation of mutations) {
      // 检查是否是truste属性的变更
      if (mutation.type === 'attributes' && mutation.attributeName === 'truste') {
        if (window.truste?.eu?.bindMap) {
          const state = window.truste.eu.bindMap.state;
          if (validStates.includes(state)) {
            setValidState(true);
          }
          observer.disconnect(); // 完成后停止监听
        }
      }
    }
  });

  // 开启对window对象属性变化的监听
  observer.observe(window, { attributes: true });

  // 组件卸载时停止监听
  return () => observer.disconnect();
}, [validStates]);

3. 监听库的加载完成事件 #

多数第三方库在加载完成后会触发全局事件，比如trusteLoaded（具体事件名需参考库的文档），直接监听该事件即可：

useEffect(() => {
  const handleTrusteeLoaded = () => {
    if (window.truste?.eu?.bindMap) {
      const state = window.truste.eu.bindMap.state;
      if (validStates.includes(state)) {
        setValidState(true);
      }
    }
  };

  // 先检查是否已加载完成（避免事件已经触发过）
  if (window.truste?.eu?.bindMap) {
    handleTrusteeLoaded();
  } else {
    window.addEventListener('trusteLoaded', handleTrusteeLoaded);
  }

  // 组件卸载时移除事件监听
  return () => window.removeEventListener('trusteLoaded', handleTrusteeLoaded);
}, [validStates]);

4. 动态加载脚本（可控脚本引入时） #

如果第三方库的脚本是你负责引入的，可以通过动态创建script标签，在onload回调中执行逻辑：

useEffect(() => {
  const script = document.createElement('script');
  script.src = '第三方库的完整URL';
  script.onload = () => {
    const state = window.truste.eu.bindMap.state;
    if (validStates.includes(state)) {
      setValidState(true);
    }
  };
  document.body.appendChild(script);

  // 组件卸载时移除脚本
  return () => document.body.removeChild(script);
}, [validStates]);

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