尝试设置窗口高度，但它在 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

你在运行 RN 吗？那你可以试试这个来获取高度~

import { Dimensions } from 'react-native';

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

---

上次发帖

添加resizeevent listener

按照这个，当你改变窗口高度时它会更新winHeight

  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);
      }
    });
  }, []);

Answer 2

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

Answer 3

试试这个：

let [winHeight,setWinHeight] = useState(0)

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

你还需要从'react'导入useEffect。

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

Answer 4

你试过在useEffect的依赖数组中添加window.height吗？

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