为什么我能够有条件地以一种方式调用钩子，而不能以另一种方式调用？答案

【问题标题】：Why am I able to conditionally call a hook one way, but not the other?为什么我能够有条件地以一种方式调用钩子，而不能以另一种方式调用？
【发布时间】：2023-03-07 06:19:01
【问题描述】：

背景： 当我刷新仪表板时，useHasPermission 会进行异步调用以确定用户有权访问 somePermission。

问题： hasPermission 最初评估为 false，但一旦异步调用完成，hasPermission 评估为 true。这会导致 useQuery、Apollo 钩子在第一次渲染时不被调用，然后在第二次渲染时被调用。显示以下错误：

“比上一次渲染时渲染了更多的钩子。”

问题： 为什么这个错误只发生在示例 A 而不是示例 B？

// Example A: Does not work
const Dashboard = () => {
  const hasPermission = useHasPermission([somePermission]);

  const getDashboardData = () => {
    const { loading, data, error } = useQuery(SOME_QUERY, {
      variables: { ...someVars }
    });
    return <Table ={data} loading={loading} error={error}><Table>
  };

  return (
    {hasPermission ? getDashboardData() : null}
    <Announcements></Announcements>
  )
}

// Example B: Works
const Dashboard = () => {
  const hasPermission = useHasPermission([somePermission]);

  const DashboardData = () => {
    const { loading, data, error } = useQuery(ACCOUNTS_FOR_CUSTOMER_DASHBOARD, {
      variables: { ...someVars }
    });
    return <Table ={data} loading={loading} error={error}><Table>
  };

  return (
    {hasPermission ? (
        <DashboardData></DashboardData>
      ) : null}
    <Announcements></Announcements>
  )
}

【问题讨论】：

标签： reactjs react-hooks react-apollo react-apollo-hooks

【解决方案1】：

Hooks 并不是conditionally used。

在第一个示例中，您有条件地调用了一个使用新钩子并返回 JSX 的函数，因此这违反了钩子的规则。

在第二个示例中，您将创建一个有条件地挂载的新组件DashboardData。因此，因为它是一个新组件，所以它是允许的。

所以两者的区别在于“A”中useQuery属于Dashboard组件，而“B”中属于DashboardData。

【讨论】：