使用React挂钩设置状态无法正常工作

Question

我有一个要设置状态的组件

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

在组件安装后，移动设备上的状态始终设置为6，这是不正确的。几毫秒后或在应用内进行互动后，initialLimit设置为3。知道问题可能在哪里吗？

编辑：useMediaQuery来自material-ui

Answer 1

您需要注意isMobile值的更改，然后进行设置：

React.useEffect(() => {
  setLimit(isMobile ? LIMIT_MOBILE : LIMIT_WEB);
}, [isMobile])

这是因为useMediaQuery挂钩本身必须计算您的媒体查询，然后为您提供结果（到那时为止，useState的初始值已被设置）。

useMediaQuery的默认值（最初返回）为null，并且强制为false（因此初始限制错误）。