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

Question

上下文： 当我刷新仪表板时，useHasPermission 进行异步调用以确定是否用户有权访问 somePermission。

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

"Rendered more hooks than during the previous render."

问题： 为什么这个错误只出现在示例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>
  )
}

Answer 1

挂钩并不意味着 conditionally used。

在第一个示例中，您有条件地调用了一个使用新钩子和 returns JSX 的函数，因此这打破了钩子的规则。

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

所以两者的区别在于"A" useQuery属于Dashboard分量，而"B"属于DashboardData.

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

Why am I able to conditionally call a hook one way, but not the other?

reactjs

react-apollo

react-hooks

react-apollo-hooks