Блог

Я продолжаю получать ошибку TypeError: Не удается прочитать свойства undefined (чтение «getBoundingClientRect») и не знаю, почему. Я использую локальный хост React (Node.js)

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

export function CardContainer() 
 {
const ref=useRef();

    let distance =ref.current.getBoundingClientRect().x-50; 
    const [scroll,setScroll]=useState('left')

    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>
    )
}
 

При первом рендеринге значение ref не определено просто потому, что оно получает свое значение позже после создания реального DOM.

Вам нужно разобраться с этим случаем при расчете расстояния

 const distance =ref.current ? ref.current.getBoundingClientRect().x-50 : DEFAULT_DISTANCE; 
 

Текущее значение React ref еще не будет определено/установлено при первоначальном рендеринге. Используйте нулевую проверку текущего значения, нулевое объединение, чтобы предоставить запасное значение.

Я также предлагаю использовать useEffect крючок, чтобы вы также не делали этого как непреднамеренный побочный эффект.

 const distance = ref.current?.getBoundingClientRect().x ?? 0 - 50;
 

или

 let distance;

useEffect(() => {
  distance = ref.current?.getBoundingClientRect().x ?? 0 - 50; 
});