嵌套条件

Question

我正在尝试使用 Gatsby 中的 Hooks 根据视口大小为变量赋值 我正在使用嵌套条件，它在我第一次测试网页时有效，但如果我手动调整窗口浏览器的大小，它会显示以下错误：

渲染的钩子比预期的要少。这可能是意外提前退货声明造成的

正如 react Docs 所说：不要在循环、条件或嵌套函数中调用 Hooks。相反，请始终在 React 函数的顶层使用 Hooks。所以我尝试使用三元运算：

let filter = (useMediaQuery({ query: '(max-width: 695px)' })) ? 2 : (useMediaQuery({ query: '(min-width: 900px)' })) ? 4 : 3

我也尝试过：

if (useMediaQuery({ query: '(max-width: 695px)' })) 
 { filter = 2 } else if (useMediaQuery({ query: '(max-width: 900px)' })) 
 { filter = 4 } else { filter = 3 }

你能帮帮我吗？

Answer 1

根据钩子的规则，所有的钩子都应该在组件的顶层调用。

export function YourComponent() {
  const isSmallFormFactor = useMediaQuery({ query: '(max-width: 695px)' });
  const isMediumFormFactor = useMediaQuery({ query: '(max-width: 900px)' });

  const filter = isSmallFormFactor
    ? 2
    : isMediumFormFactor
    ? 4
    : 3;

  return (
    // ...
  );
}