Trying to set window height but it gives an error in react.js

user_13349320 0
Viewed 420

I use useState to get the window height but it gives a runtime error saying that window is not defined. Do you know why

Here's the code:

let [winHeight,setWinHeight] = useState(window.innerHeight)

useEffect(() => {
          const list = []
          for (var i=0;i<datas.length;i++){
               const t = datas[i].title
               const res = handleResize(i + 2)
               list.push(<li ref={resl[i + 1]} style={{top: "20px",left: res + "px"}}><Anchor href={datas[i].link || `/${t.replace(/ /g, "_")}`}><a onClick={() => closeNav()} onMouseOver={() => setHovering(i)}>{t}</a></Anchor></li>)
          }
          setWinHeight(window.innerHeight)
          setLinks(list)
     }, [winHeight])
use-state react-native typescript reactjs javascript
4 Answers

Have you tried adding window.height in useEffect's dependency array?

useEffect(() => {
      const list = []
      for (var i=0;i<datas.length;i++){
           const t = datas[i].title
           const res = handleResize(i + 2)
           list.push(<li ref={resl[i + 1]} style={{top: "20px",left: res + "px"}}><Anchor href={datas[i].link || `/${t.replace(/ /g, "_")}`}><a onClick={() => closeNav()} onMouseOver={() => setHovering(i)}>{t}</a></Anchor></li>)
      }
      setLinks(list)
 }, [window.innerHeight])
user_110385190

Try this:

let [winHeight,setWinHeight] = useState(0)

useEffect(()=> {
setWinHeight(window.innerHeight)
},[])

And also you need to import useEffect from 'react'.

window isn't defined because the component isn't renderer at the point you are trying to access window object.

user_129430790

Are you running on RN? Then you can try this to get the height~

import { Dimensions } from 'react-native';

const windowHeight = Dimensions.get('window').height;

Last Post

Add the resize event listener

Following this one, it would update the winHeight when you change height of window

  const lastHeight = useRef(window.innerHeight);

  const [winHeight, setWinHeight] = useState(lastHeight.current);

  useEffect(() => {
    window.addEventListener('resize', (e) => {
      const curHeight = e.currentTarget?.innerHeight;
      if (lastHeight.current !== curHeight) {
        lastHeight.current = curHeight;
        setWinHeight(curHeight);
      }
    });
  }, []);
user_112491910

use [window.innerHeight] not [winHeight] inside dependency Array of UseEffect

user_88769110
Related