useMutation
是 React Query 库中的一个 Hook,用于处理数据修改操作,例如创建、更新或删除数据。它返回一个函数,该函数可以用来执行 mutation 请求,并且可以监听 mutation 的状态变化。
isLoading
、isError
、data
和 error
等。React Query 的 useMutation
Hook 主要有以下几种类型:
假设你正在开发一个电商应用,用户可以同时添加多个商品到购物车。你可以使用 useMutation
的并行加载功能来实现这一需求。
import { useMutation } from 'react-query';
const addToCartMutation = useMutation((productId) => {
return fetch(`/api/cart`, {
method: 'POST',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify({ productId }),
}).then((res) => res.json());
}, {
onSuccess: (data, variables, context) => {
console.log('Product added to cart:', data);
},
onError: (error, variables, context) => {
console.error('Error adding product to cart:', error);
},
});
const handleAddToCart = (productId) => {
addToCartMutation.mutate(productId);
};
// 并行加载示例
const productsToAdd = [1, 2, 3]; // 假设有多个商品需要添加到购物车
productsToAdd.forEach((productId) => {
handleAddToCart(productId);
});
原因:由于网络请求的异步性,多个 mutation 请求可能会以不同的顺序返回结果。
解决方法:可以使用 Promise.all
来确保所有请求都完成后再进行处理。
const handleAddToCartParallel = async (productsToAdd) => {
try {
const results = await Promise.all(productsToAdd.map((productId) => addToCartMutation.mutateAsync(productId)));
console.log('All products added to cart:', results);
} catch (error) {
console.error('Error adding products to cart:', error);
}
};
handleAddToCartParallel(productsToAdd);
通过以上内容,你应该对 useMutation
的并行加载功能有了更全面的了解,并且掌握了相关的实现方法和解决问题的技巧。
领取专属 10元无门槛券
手把手带您无忧上云