使用React Hooks设置状态异常，移动端初始值不符求助

嘿，这个问题我之前在项目里也碰到过，核心原因其实是 Material-UI useMediaQuery 的初始值特性，加上 React useState 只在组件挂载时初始化一次的机制导致的：

为什么会出现这种不符合预期的情况？ #

• Material-UI的useMediaQuery在组件首次挂载的瞬间，尤其是服务端渲染（SSR）场景下，或者浏览器还没来得及完成媒体查询计算的时候，会返回一个默认的初始值（通常是false，也就是判定为非移动端）。这时候你的initialLimit会被设为LIMIT_WEB=6，而useState(initialLimit)只会在组件第一次渲染时把这个值作为limit的初始状态。
• 等浏览器完成媒体查询的计算后，useMediaQuery会更新返回值为true（移动端），这时候initialLimit确实会变成3，但useState的初始化已经完成了——它不会自动跟着更新limit，除非有交互触发组件重新渲染并手动修改limit，这就是你看到“数毫秒后或交互后initialLimit变3，但limit始终是6”的原因。

两种可靠的解决办法： #

办法一：监听媒体查询变化，自动同步limit #

既然useMediaQuery的返回值是响应式的，我们可以用useEffect监听它的变化，一旦设备状态（移动端/桌面端）切换，就同步更新limit：

const LIMIT_MOBILE = 3; 
const LIMIT_WEB = 6; 
const isMobile = useMediaQuery(MOBILE_BREAKPOINT); 
const [limit, setLimit] = useState(isMobile ? LIMIT_MOBILE : LIMIT_WEB); 

// 监听isMobile的变化，实时更新limit
useEffect(() => {
  setLimit(isMobile ? LIMIT_MOBILE : LIMIT_WEB);
}, [isMobile]);

这样不管是初始挂载后的状态修正，还是用户手动调整浏览器窗口尺寸（比如拉窄/拉宽），limit都会自动同步到正确的值，完美覆盖所有场景。

办法二：给useMediaQuery指定正确的初始默认值 #

如果你的应用是纯客户端渲染，也可以先在客户端提前判断当前设备状态，把这个结果作为useMediaQuery的初始默认值，确保组件首次渲染就拿到正确的状态：

// 先在客户端判断当前是否匹配移动端断点
const initialIsMobile = typeof window !== 'undefined' 
  ? window.matchMedia(MOBILE_BREAKPOINT).matches 
  : false;

const isMobile = useMediaQuery(MOBILE_BREAKPOINT, { defaultMatches: initialIsMobile }); 
const [limit, setLimit] = useState(isMobile ? LIMIT_MOBILE : LIMIT_WEB);

不过这种方式没法处理用户动态调整窗口尺寸的情况，所以更推荐办法一，适用性更广。

另外提一句：如果你的应用是服务端渲染（比如用Next.js），useMediaQuery的初始值问题会更突出，这时候用办法一的useEffect方案是最稳妥的——毕竟服务端没法获取客户端的屏幕尺寸，只能等客户端渲染完成后修正状态。

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