Búsqueda de sitios web

javascript - Intentando establecer la altura de la ventana pero da un error en react.js


Uso useState para obtener la altura de la ventana, pero da un error en tiempo de ejecución diciendo que window no está definido. ¿Sabes por qué?

Aquí está el código:

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])

Respuesta #1

¿Has intentado agregar window.height en el array de dependencias de useEffect?

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])

Respuesta #2

Prueba esto:

let [winHeight,setWinHeight] = useState(0)

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

Y también necesitas importar useEffect de 'react'.

window no está definido porque el componente no se ha renderizado en el momento en que estás intentando acceder al objeto window.