对象可能是“未定义” ts2532

Question

I get the error when I want to make a slider and I have looked for several alternatives to solve it but none of them work. The error is in useEffect(() => {setWidth ( carousel.current.scrollWidth - carousel.current.offsetWidth)}, []); and in carousel.current

 import React from "react"; import { motion } from "framer-motion"; import { useRef, useEffect, useState } from "react"; import images from "../images"; function Sliders() { const [width, setWidth] = useState(0); const carousel = useRef(); useEffect(() => { setWidth (carousel.current.scrollWidth - carousel.current.offsetWidth) }, []); return ( <div className="Sliders"> <motion.div red={carousel} className="carusel" whileTap={{cursor: "grabbing"}} > <motion.div drag="x" dragConstraints={{ right: 0, left: -width}} className="inner-carousel" > {images.map((image) => { return ( <motion.div className="item" key={image}> <img src={image} alt="" /> </motion.div> ); })} </motion.div> </motion.div> </div> ); } export default Sliders

Answer 1

When the component is launched, initially the value for carousel.current is undefined. Just wrap the statement in if condition, and I believe it should work.

useEffect(() => {
  if (carousel?.current) {
    setWidth (carousel.current.scrollWidth -  carousel.current.offsetWidth)
  }
}, []);

Note: You can try to console carousel.current before return statement to be sure when the object is undefined and at what point it gets populated.