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

Question

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

问题：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>
)
}

Answer 1

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

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

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

所以两者之间的区别在于"A"useQuery属于Dashboard分量，而在"B"中它属于DashboardData。