React中自定义hook结合filter时useRef初始渲染返回undefined问题

你开发的图片滑块组件搭配自定义hook useSizeElement，在完整数据渲染时正常，但过滤数据后单独渲染会触发Uncaught TypeError: elementRef.current is undefined错误，核心原因是过滤后可能无数据，导致Item组件未渲染，useSizeElement却尝试访问未绑定真实DOM的ref。

1. 在hook中添加空值校验 #

修改useSizeElement，每次访问elementRef.current前先判断是否存在：

function useSizeElement() {
  const elementRef = useRef(null);
  const [size, setSize] = useState({ width: 0, height: 0 });

  useEffect(() => {
    if (!elementRef.current) return;

    const updateSize = () => {
      if (elementRef.current) {
        const { width, height } = elementRef.current.getBoundingClientRect();
        setSize({ width, height });
      }
    };

    updateSize();
    window.addEventListener('resize', updateSize);
    return () => window.removeEventListener('resize', updateSize);
  }, []);

  return { elementRef, size };
}

2. 前置判断过滤后的数据状态 #

渲染SliderTwo组件前，先检查过滤后的数据是否为空，为空则渲染占位内容或不渲染组件：

const filteredData = data.filter(/* 你的过滤逻辑 */);
if (filteredData.length === 0) {
  return <div>暂无内容</div>;
}
return <SliderTwo data={filteredData} />;

3. 在Item组件中做条件渲染与ref绑定 #

确保只有Item组件存在有效内容时，才渲染DOM并绑定ref：

function Item({ item, elementRef }) {
  if (!item) return null;
  return <div ref={elementRef}>{/* 组件内容 */}</div>;
}

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