Sigo recibiendo el error TypeError: no se pueden leer las propiedades de undefined (leyendo 'getBoundingClientRect') y no sé por qué. Estoy usando React localhost (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> ) }En el primer render, el valor de referencia no está definido simplemente porque obtiene su valor más tarde después de que se haya construido el DOM real.
Debe manejar este caso al calcular la distancia.
const distance =ref.current ? ref.current.getBoundingClientRect().x-50 : DEFAULT_DISTANCE;El valor actual de React ref aún no se definirá/establecerá en el renderizado inicial. Use una verificación nula en el valor actual, fusión nula para proporcionar un valor alternativo.
También sugiero usar un gancho useEffect para que no esté haciendo esto como un efecto secundario no intencional.
const distance = ref.current?.getBoundingClientRect().x ?? 0 - 50;o
let distance; useEffect(() => { distance = ref.current?.getBoundingClientRect().x ?? 0 - 50; });