React组件挂载时window.innerWidth为何为undefined？仅resize后正常

核心原因 #

你代码里的初始状态赋值存在拼写错误：window.innerwidth应该是window.innerWidth（注意W是大写）。这个错误导致初始状态读取了一个不存在的属性，所以width一开始是undefined，只有窗口调整时触发事件才会设置正确的值。

修正后的代码 #

const [width, setWidth] = useState(window.innerWidth); // 修正拼写错误
useEffect(() => {
    const handleResizeWindow = () => setWidth(window.innerWidth);
    // 监听窗口 resize 事件
    window.addEventListener("resize", handleResizeWindow);
    // 组件卸载时移除监听
    return () => {
        window.removeEventListener("resize", handleResizeWindow);
    };
}, [])
useEffect(() => {
    if (width >= 900) {
        dispatch(setView('trip'))
    }
    console.log(width)
}, [width])

额外优化建议 #

如果你的应用涉及服务端渲染（SSR），直接访问window会报错（服务端环境没有window对象），可以改成以下写法避免报错：

// 初始值判断是否存在window对象，不存在则设为默认值0
const [width, setWidth] = useState(typeof window !== 'undefined' ? window.innerWidth : 0);

另外，也可以在第一个useEffect里主动调用一次handleResizeWindow，确保初始状态绝对同步当前窗口宽度：

useEffect(() => {
    const handleResizeWindow = () => setWidth(window.innerWidth);
    window.addEventListener("resize", handleResizeWindow);
    handleResizeWindow(); // 初始触发一次，同步宽度
    return () => {
        window.removeEventListener("resize", handleResizeWindow);
    };
}, [])

修正后，你的条件渲染代码就能在首次加载时正常工作了：

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

内容的提问来源于stack exchange，提问作者benwl