为什么我的自定义钩子被调用了这么多次?

Question

我正在尝试实现一个自定义钩子来为应用程序提供访客购物车。我的钩子缠绕在阿波罗的useMutation钩子上，它将购物车ID保存在cookie中，同时还提供了"重置"购物车的功能(基本上，在下订单时删除cookie(。

代码时间！(为简洁起见，省略了一些代码(：

export const useGuestCart = () => {
let cartId;
const [createCart, { data, error, loading }] = useMutation(MUTATION_CREATE_CART);
console.log(`Hook!`);
if (!cartId || cartId.length === 0) {
createCart();
}
if (loading) {
console.log(`Still loading`);
}
if (data) {
console.log(`Got cart id ${data.createEmptyCart}`);
cartId = data.createEmptyCart;
}
const resetGuestCart = useCallback(() => {
// function body here
});
return [cartId, resetGuestCart];
};

在我的组件中，我只是使用let [cartId, resetCart] = useGuestCart();获取购物车的 ID。

当我运行我的单元测试(使用 Apollo 提供模拟突变(时，我看到钩子被多次调用，输出如下所示：

console.log src/utils/hooks.js:53
Hook!
console.log src/utils/hooks.js:53
Hook!
console.log src/utils/hooks.js:59
Still loading
console.log src/utils/hooks.js:53
Hook!
console.log src/utils/hooks.js:62
Got cart id guest123
console.log src/utils/hooks.js:53
Hook!
console.log src/utils/hooks.js:53
Hook!

我才开始使用钩子，所以我仍然无法掌握它们的工作方式。为什么钩子的调用如此之多？

感谢您的回复！

Answer 1

将钩子视为直接在组件中具有相同的代码。这意味着每次组件渲染钩子时都会运行。

例如，您可以定义：

let cartId;
// ...
if (!cartId || cartId.length === 0) {
createCart();
}

语句中的内容将在每次创建cartId时在每个呈现上运行，并且此时没有分配任何值。不使用if语句，请使用useEffect：

export const useGuestCart = () => {
const [cartId, setCartId] = useState(0);
const [createCart, { data, error, loading }] = useMutation(
MUTATION_CREATE_CART
);
const resetGuestCart = () => {
// function body here
};
useEffect(() => {
if(!cartId || cartId.length === 0){
createCart();
}
}, [cartId]);
useEffect(() => {
// Here we need to consider the first render.
if (loading) {
console.log(`Started loading`);
} else {
console.log(`Finished loading`);
}
}, [loading]);
useEffect(() => {
// Here we need to consider the first render.
console.log(`Got cart id ${data.createEmptyCart}`);
setCartId(data.createEmptyCart);
}, [data]);
return [cartId, resetGuestCart];
};

另请注意，如果未记住接收函数的组件，则使用useCallback没有实际好处。