useSize在乾坤微前端做了多tab的keepAlive时候子应用的 DOM 节点可能已经被销毁或重新挂载，导致 ResizeObserver 监听的节点失效直接白屏 #2699

ngwszsd · 2024-12-13T03:39:25Z

报错信息：

TypeError: undefined is not iterable (cannot read property Symbol(Symbol.iterator))

解决思路

import { useState, useEffect } from 'react';

export const useSize = (domRef: React.RefObject<HTMLElement>) => {
  const [size, setSize] = useState({ width: 0, height: 0 });

  useEffect(() => {
    const element = domRef.current;

    if (!element) {
      console.warn('`useSize`: domRef is null or undefined.');
      return;
    }

    if (typeof ResizeObserver === 'undefined') {
      console.warn('`useSize`: ResizeObserver is not supported by this browser.');
      return;
    }

    let isMounted = true; // 防止卸载后更新状态
    const observer = new ResizeObserver(entries => {
      if (!isMounted) return;

      try {
        const entry = entries[0];
        if (entry && entry.target.isConnected) {
          const { width, height } = entry.contentRect;
          setSize({ width, height });
        }
      } catch (error) {
        console.error('`useSize`: Error in ResizeObserver callback.', error);
      }
    });

    observer.observe(element);

    return () => {
      isMounted = false;
      observer.disconnect(); // 确保在卸载时断开监听
    };
  }, [domRef]);

  return size;
};

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

useSize在乾坤微前端做了多tab的keepAlive时候子应用的 DOM 节点可能已经被销毁或重新挂载，导致 ResizeObserver 监听的节点失效直接白屏 #2699

useSize在乾坤微前端做了多tab的keepAlive时候子应用的 DOM 节点可能已经被销毁或重新挂载，导致 ResizeObserver 监听的节点失效直接白屏 #2699

useSize在乾坤微前端做了多tab的keepAlive时候 子应用的 DOM 节点可能已经被销毁或重新挂载，导致 ResizeObserver 监听的节点失效 直接白屏 #2699

useSize在乾坤微前端做了多tab的keepAlive时候 子应用的 DOM 节点可能已经被销毁或重新挂载，导致 ResizeObserver 监听的节点失效 直接白屏 #2699

Comments

报错信息：

解决思路

useSize在乾坤微前端做了多tab的keepAlive时候子应用的 DOM 节点可能已经被销毁或重新挂载，导致 ResizeObserver 监听的节点失效直接白屏 #2699

useSize在乾坤微前端做了多tab的keepAlive时候子应用的 DOM 节点可能已经被销毁或重新挂载，导致 ResizeObserver 监听的节点失效直接白屏 #2699