尝试设置 window 高度，但在 react.js 中出现错误

Question

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

代码如下：

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

Answer 2

试试这个：

let [winHeight,setWinHeight] = useState(0)

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

并且您还需要从 'react'.

导入 useEffect

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

Answer 3

你运行是 RN 吗？那你可以试试这个得到高度~

import { Dimensions } from 'react-native';

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

上次Post

添加 resize event listener

在这之后，当您更改 window

的高度时，它会更新 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 4

在 UseEffect

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

尝试设置 window 高度，但在 react.js 中出现错误

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

javascript

typescript

reactjs

react-native

use-state