在useEffect中获取clientWidth后无法为useState定义的变量赋值如何解决

错误原因 #

useState返回数组的第二个元素是状态更新函数，你代码中setIsMobile = true的写法相当于给常量函数重新赋值，既触发了常量修改的报错，也无法完成状态更新。正确用法是调用该更新函数，将目标状态值作为参数传入：setIsMobile(true)。

修正后代码 #

import React, { useState, useEffect } from 'react';

export default function App() {
  const [isMobile, setIsMobile] = useState(false);

  useEffect(() => {
    if (document.documentElement.clientWidth <= 400) {
      console.log(document.documentElement.clientWidth);
      setIsMobile(true);
    }
  }, []);

  return (
    <div>
      {isMobile ? <div>This is Mobile</div> : <div>This is normal</div>}
    </div>
  );
}

优化建议 #

当前实现仅在组件首次挂载时判断一次窗口尺寸，窗口大小变化时不会同步更新状态。如果需要响应窗口 resize 事件，可以调整useEffect逻辑如下：

useEffect(() => {
  const checkIsMobile = () => {
    setIsMobile(document.documentElement.clientWidth <= 400);
  };
  // 首次加载时判断
  checkIsMobile();
  // 监听窗口大小变化
  window.addEventListener('resize', checkIsMobile);
  // 组件卸载时移除监听，避免内存泄漏
  return () => window.removeEventListener('resize', checkIsMobile);
}, []);

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