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}}