TypeError: Cannot set properties of undefined (setting 'transform')-CodePudding

This is the part of my react application, where I've used a ref.current which is equal to null, then I'm changing it's property, I know like this is surely gonna give me error but in one of my friend's project with same react component WorkPage it's working fine. I'm so confused, is there any sort of fault in mine?

const WorkPage = () => {
  const ref = useRef(null);

  useEffect(() => {
    let element = ref.current;

    const rotate = () => {
      element.style.transform = `translateX(${-window.pageYOffset}px)`
    };

    window.addEventListener('scroll', rotate)
    return () => window.removeEventListener('scroll', rotate)
  }, [])

CodePudding user response：

refs is not guaranteed to be set on first render caveats-with-callback-refs so you need to check if the element exists before you try to manipulate it directly in the DOM

if (ref && ref.current) {
  // do something
}

CodePudding user response：

On first render ref is undefined. You can use optional chaining operator

let element = ref?.current;

CodePudding user response：

Surely it will throw error, because you did not assign ref to any DOM element, so ref.current is always null. Make sure to assign it to a DOM element like this:

const WorkPage = () => {
  const ref = useRef(null);

  useEffect(() => {
    let element = ref.current;

    const rotate = () => {
      element.style.transform = `translateX(${-window.pageYOffset}px)`;
    };

    window.addEventListener("scroll", rotate);
    return () => window.removeEventListener("scroll", rotate);
  }, []);

  // assign ref to one of your DOM element
  return <div ref={ref}>your element</div>;
};