React运行报TypeError: Cannot read 'getBoundingClientRect' of undefined 如何解决

TypeError: Cannot read properties of undefined (reading 'getBoundingClientRect') 报错的核心原因是你在React组件DOM还未完成挂载的阶段，就调用了还未初始化的ref的current属性。

你代码中ref绑定的<Card.ArrowSliderLeft>组件，在组件首次执行渲染逻辑时还没有被挂载到DOM树上，此时ref.current的初始值为undefined，直接同步读取ref.current.getBoundingClientRect()自然会抛出属性读取错误。

• 首先将获取DOM节点属性的逻辑迁移到useEffect钩子中，useEffect回调会在DOM挂载完成后执行，此时ref.current已经完成赋值，同时增加可选链判空逻辑避免边界异常：

import React,{useRef,useState, useEffect} from 'react';
import { Card } from '../components';
import { CardItemContainer } from './card-item';

export function CardContainer() 
 {
  const ref = useRef();
  const [scroll,setScroll] = useState('left')

  // 挂载完成后再读取DOM属性
  useEffect(() => {
    // 可选链判空避免异常
    const distance = ref.current?.getBoundingClientRect().x - 50; 
    // 此处添加你需要使用distance的业务逻辑
  }, [])

  return(
    <Card>
        <Card.ListTitle> Continue to watch</Card.ListTitle>
        <Card.Wrapper>
            <Card.ArrowSliderLeft setScroll={setScroll}  ref={ref}/>
            <Card.List scroll={scroll}  >
              <CardItemContainer/>
              <CardItemContainer/>
              <CardItemContainer/>
            </Card.List>
            <Card.ArrowSliderRight setScroll={setScroll} />
        </Card.Wrapper>
    </Card>
  )
}

• 如果<Card.ArrowSliderLeft>是你自定义的React函数组件，需要用React.forwardRef包裹该组件，将ref转发到组件内部真实的DOM节点上，否则ref只会拿到组件实例，无法读取DOM的getBoundingClientRect方法。

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