javascript - React, useRef not allowing to access current properties, getting Uncaught TypeError: Cannot read properties of unde

admin管理员组

文章数量:1429079

I'm storing a reference to an image item using: const renderedImageRef = useRef(). The ref is then assigned in render() function using:

<img ref={renderedImageRef} src=... />

In another JSX item below, I try to access renderedImageRef.current.clientHeight using:

<div style={{top:`${renderedImageRef.current.clientHeight}px`}}>
   Hello world
</div>

But this produces an error in the console:

Uncaught TypeError: Cannot read properties of undefined (reading 'clientHeight')

Strangely enough, if I try to access renderedImageRef.current.clientHeight from inside a useEffect hook, it displays the height correctly:

useEffect(() => {
    if(renderedImageRef !== null) {
        console.log(renderedImageRef)
    }
}, [renderedImageRef])

Why am I getting the console error?

I'm storing a reference to an image item using: const renderedImageRef = useRef(). The ref is then assigned in render() function using:

<img ref={renderedImageRef} src=... />

In another JSX item below, I try to access renderedImageRef.current.clientHeight using:

<div style={{top:`${renderedImageRef.current.clientHeight}px`}}>
   Hello world
</div>

But this produces an error in the console:

Uncaught TypeError: Cannot read properties of undefined (reading 'clientHeight')

Strangely enough, if I try to access renderedImageRef.current.clientHeight from inside a useEffect hook, it displays the height correctly:

useEffect(() => {
    if(renderedImageRef !== null) {
        console.log(renderedImageRef)
    }
}, [renderedImageRef])

Why am I getting the console error?

• javascript
• reactjs

Share Improve this question Follow edited Mar 19, 2023 at 16:15 Youssouf Oumar 46.7k1616 gold badges103103 silver badges105105 bronze badges asked Mar 12, 2022 at 11:19 SamSam 1,2302121 silver badges4848 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 5

A possible answer is that this line:

<div style={{top:`${renderedImageRef.current.clientHeight}px`}}>Hello world</div>

is ing in your code before this one:

<img ref={renderedImageRef} src=... />

In which case, it is normal that you are getting the error. It is to know that when you call const renderedImageRef = useRef(), the value of renderedImageRef is {current:undefined}. The JSX must be rendered before a ref gets its value in the current field.

A solution is to use a state for the top:

const [top, setTop] = useState(0);
useEffect(() => {
  // At this point, the current is defined. This if is useful in case you use TypeScript
  if (renderedImageRef.current) {
    setTop(renderedImageRef.current.clientHeight);
  }
}, []);

<div style={{top:`${top}px`}}>Hello world</div>

If you are using Next.JS, I think you have to change the dependency to renderedImageRef.current. So something like this:

const [top, setTop]=useState(0)
useEffect(() => {
    if(renderedImageRef.current) {
        setTop(renderedImageRef.current.clientHeight);
    }
}, [renderedImageRef.current])

本文标签：