慕的地6264312
2023-07-20 09:45:36
我的項(xiàng)目中有以下代碼,我需要在實(shí)時(shí)單擊時(shí)禁用 wislist 按鈕。我能夠禁用它,但在重新加載頁(yè)面后它被禁用。我需要在單擊按鈕后立即執(zhí)行此操作。這是我的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.jsexport 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 };
1 回答

慕桂英4014372
TA貢獻(xiàn)1871條經(jīng)驗(yàn) 獲得超13個(gè)贊
isItemAdded僅當(dāng)且僅當(dāng)發(fā)生更改時(shí)才會(huì)重新計(jì)算product。還應(yīng)該考慮是否data通過(guò)將其添加為 中的依賴項(xiàng)而發(fā)生更改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
)
添加回答
舉報(bào)
0/150
提交
取消