Reactjs实时禁用按钮onclick答案

【问题标题】：Reactjs disable button onclick realtimeReactjs实时禁用按钮onclick
【发布时间】：2021-02-22 04:12:12
【问题描述】：

我的项目中有以下代码，我需要在实时点击时禁用 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 返回。

使用AddWishlistItem.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
    };
};

请帮忙

【问题讨论】：

标签： javascript reactjs onclick buttonclick react-button

【解决方案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
)

【讨论】：

当我这样做时，我得到错误 isItemAdded is not a function
那么isItemAdded 总是正确的。你能分享你的useAddWishlistItem()，我会更新答案。谢谢。