javascript - Reactjs回调在返回错误之前获取错误

Question

嗨，我是反应的初学者，我有以下代码

import { useCallback } from 'react';
import { useMutation } from '@apollo/client';

import { useCartContext } from '@magento/peregrine/lib/context/cart';


export const useWishlistAllItems = props => {
    const { items,mutations } = props;
    const { addSimpleWishListItemToCartMutation } = mutations;

    const [{ cartId }] = useCartContext();
 

    const [addWishlistItemToCart, { error, loading }] = useMutation(addSimpleWishListItemToCartMutation);


    const handleAddAllItemsToCart = useCallback(async () => {
        try {
            items.map((item,index) => {
                if (item.product.__typename !== 'ConfigurableProduct'){
                    const cartItem = {
                        data: {
                            quantity: 1,
                            sku: item.product.sku
                        }
                    };
                    addWishlistItemToCart({
                        variables: {
                            cartId,
                            cartItem
                        }
                    });
                }
            })

        } catch {
            return;
        }
    }, [addWishlistItemToCart, cartId, items]);

    const saveWishList = useCallback(async () => {
        try {
            window.location.reload(false);
        }catch {
            return;
        }
    }, []);



    return {
        handleAddAllItemsToCart,
        saveWishList,
        hasError: !!error,
        isLoading: loading
    };
};

问题是在错误返回到我的主要组件之前显示错误。我得到以下

我已经正确处理了我的组件中返回的错误，但问题是我在返回到组件之前得到了上述错误。我认为这是因为回调函数。请给我一个解决方案。

标签： javascriptreactjserror-handlingcallback

Answer 1

在没有等待的情况下运行异步方法就像只是启动任务而不监控它的进度和结果。因此，再次使用 await 检查您的代码并返回适当的输出。