Reactjs 禁用按钮 onclick 实时

Question

I have the following code in my project and I need to disable the wislist button on click realtime. I was able to disable it but it's disabled after reloading the page.I need to do that just after the button is clicked.

This is my js

  const talProps = useAddWishlistItem({
        childSku: item.sku,
        sku: item.sku,
        query: WishlistPageOperations,
        mutation: wishlistItemOperations,
        product
    });
    const {
        handleAddToWishlist,
        isAddToCartDisabled,
        hasError,
        isItemAdded
    } = talProps;

This is my button

    <Button
                    className={classes.btnWishlist}
                    onClick={handleAddToWishlist}
                    disabled={isItemAdded}>
                    <img className={classes.WishlistIcon} src={WishlistIcon}/>
                </Button>

isItemAdded is returned from 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, productType, quantity, wishListId]);

    const isItemAdded = useMemo(
        () => getIsItemAdded(product),
        [ product]
    )

    return {
        handleAddToWishlist,
        hasError: !!error,
        isAddToCartDisabled:
        isAddSimpleLoading,
        isItemAdded
    };
};

Please help

Answer 1

isItemAdded will only be recomputed if and only if product changed. It should also be considered if data has changed by adding it as a dependency in 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
)