gpt4 book ai didi

javascript - 为什么我的自定义钩子(Hook)被调用了这么多次?

转载 作者:行者123 更新时间:2023-11-29 10:55:45 25 4
gpt4 key购买 nike

我正在尝试实现一个自定义 Hook 来为应用程序提供访客购物车。我的钩子(Hook)环绕着 Apollo 的 useMutation 钩子(Hook),它将购物车 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 提供模拟突变)我看到 hook 被调用了几次,输出看起来像这样:

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!

我只是开始使用钩子(Hook),所以我仍然无法掌握它们的工作方式。为什么要调用这么多钩子(Hook)?

感谢您的回复!

最佳答案

将钩子(Hook)视为直接在组件中具有相同的代码。这意味着每次组件呈现时,钩子(Hook)都会运行。

例如你定义:

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 没有任何实际好处。

关于javascript - 为什么我的自定义钩子(Hook)被调用了这么多次?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/58007429/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com