Gatsby中用Hooks按视口大小赋值出现Hook调用报错如何解决？

错误根源 #

你尝试的三元运算、if判断写法本质还是条件调用Hook：当第一个useMediaQuery返回结果为真时，第二个useMediaQuery不会被执行，导致不同渲染周期的Hook调用数量不一致，触发报错。

Rendered fewer hooks than expected. This may be caused by an accidental early return statement

正确解决方案 #

按照React Hook规则，先在组件顶层无条件调用所有需要用到的useMediaQuery，拿到所有媒体查询的匹配结果后，再通过条件逻辑给filter赋值，保证每次渲染的Hook调用数量完全固定。
正确代码示例：

// 组件顶层无条件调用所有Hook，和后续逻辑完全解耦
const isSmallScreen = useMediaQuery({ query: '(max-width: 695px)' })
const isLargeScreen = useMediaQuery({ query: '(min-width: 900px)' })

// 后续再做变量赋值逻辑
let filter
if (isSmallScreen) {
  filter = 2
} else if (isLargeScreen) {
  filter = 4
} else {
  filter = 3
}

也可以用三元运算简化写法，只要提前完成所有Hook调用即可：

const filter = isSmallScreen ? 2 : isLargeScreen ? 4 : 3

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