为什么 window.innerWidth 在ComponentMount（React（？

Question

当我第一次加载我的应用程序时，我的width是未定义的。 只有在我调整大小后它才能按预期工作。

    const [width, setWidth] = useState(window.innerwidth);
    useEffect(() => {
        const handleResizeWindow = () => setWidth(window.innerWidth);
        // subscribe to window resize event "onComponentDidMount"
        window.addEventListener("resize", handleResizeWindow);
        return () => {
            // unsubscribe "onComponentDestroy"
            window.removeEventListener("resize", handleResizeWindow);
        };
    }, [])
    useEffect(() => {
        if (width >= 900) {
            dispatch(setView('trip'))
        }
        console.log(width) //prints 'undefined' on initial mount
    }, [width])

我有条件地根据width渲染组件，但除非我调整大小，否则它不起作用。

return
  (
    <>
      {width < 900 &&
         <MobileNavbar />
      }
    </>
  )

Answer 1

window 没有innerwidth属性。

const [width, setWidth] = useState(window.innerwidth); ❌

试试这个， const [width, setWidth] = useState(window.innerWidth); ✅