试图设置窗口高度，但它给出了一个错误react.js[重复]

Question

我使用useState获取窗口高度，但它给出了一个运行时错误，表示未定义窗口。你知道为什么吗

代码如下：

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

Answer 1

在UseEffect的依赖项数组中使用[window.innerHeight]而不是[winHeight]

Answer 2

试试这个：

let [winHeight,setWinHeight] = useState(0)

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

另外，您还需要从反应中导入use效应。

未定义窗口，因为组件在您尝试访问窗口对象时不是渲染器。

Answer 3

您是否尝试过添加window.height到use效应的依赖数组中？

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