如何解决Reactjs实时禁用onclick按钮
我的项目中包含以下代码,并且需要在单击实时时禁用wislist按钮。我可以将其禁用,但是在重新加载页面后将其禁用。我需要在单击按钮后立即执行此操作。
这是我的js
const talProps = useAddWishlistItem({
childSku: item.sku,sku: item.sku,query: WishlistPageOperations,mutation: wishlistItemOperations,product
});
const {
handleAddToWishlist,isAddToCartDisabled,hasError,isItemAdded
} = talProps;
这是我的按钮
<Button
className={classes.btnWishlist}
onClick={handleAddToWishlist}
disabled={isItemAdded}>
<img className={classes.WishlistIcon} src={WishlistIcon}/>
</Button>
isItemAdded从useAddWishlistItem返回。
useAddWishlistItem.js
export const useAddWishlistItem = props => {
const {mutation,query,product} = props;
const {mutations} = mutation;
const {addProductToWishlist} = mutations;
const {queries} = query;
const {getCustomerDetails} = queries;
const productType = product.__typename;
const [quantity] = useState(INITIAL_QUANTITY);
const {data,err,load} = useQuery(getCustomerDetails);
let wishListId;
if (data) {
const {customer} = data;
const {wishlist} = customer;
wishListId = wishlist.id;
}
const getIsItemAdded = (product) =>{
for (let i=0; i< data.customer.wishlist.items.length;i++){
if (data.customer.wishlist.items[i].product.url_key === product.url_key){
return true;
}
}
}
const [addItemsToWishlist,{ error,loading:isAddSimpleLoading }] = useMutation(addProductToWishlist);
const handleAddToWishlist = useCallback(async () => {
const payload = {
item: product,productType,quantity
};
const variables = {
wishListId,parentSku: payload.item.sku,product: payload.item,quantity: payload.quantity,sku: payload.item.sku
}
try {
await addItemsToWishlist({
variables
});
} catch {
return;
}
},[addItemsToWishlist,product,quantity,wishListId]);
const isItemAdded = useMemo(
() => getIsItemAdded(product),[ product]
)
return {
handleAddToWishlist,hasError: !!error,isAddToCartDisabled:
isAddSimpleLoading,isItemAdded
};
};
请帮助
解决方法
isItemAdded
仅在且仅当product
更改时才会重新计算。通过将data
作为依赖项添加到useMemo()
中,还应考虑是否更改了const getIsItemAdded = (product,data) => {
for (let i=0; i< data.customer.wishlist.items.length;i++){
if (data.customer.wishlist.items[i].product.url_key === product.url_key){
return true;
}
}
return false;
}
const isItemAdded = useMemo(
() => getIsItemAdded(product,data),[product,data] // add data
)
。
{{1}}
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。