Reactjs 禁用按钮 onclick 实时

Question

我的项目中有以下代码，我需要在实时点击时禁用 wislist 按钮。我能够禁用它，但它在重新加载后被禁用 page.I 需要在单击按钮后立即执行此操作。

这是我的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>

从 useAddWishlistItem 返回 isItemAdded。

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

请帮忙

Answer 1

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
)

Reactjs 禁用按钮 onclick 实时

Reactjs disable button onclick realtime

javascript

onclick

buttonclick

reactjs

react-button