为什么 window.innerWidth 'undefined' onComponentMount (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的come组件，但除非我调整大小，否则它不起作用。

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

Answer 1

窗口没有innerwidth属性

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

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