2

上下文： 当我刷新仪表板时，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>
  )
}
4

1 回答 1

3

钩子并不意味着有条件地使用。

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

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

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

于 2019-12-10T15:11:15.600 回答