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

Question

您好，我是 react 初学者，我有以下代码

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

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

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

Answer 1

在没有等待的情况下运行异步方法就像在没有等待的情况下启动 Task 监测它的进展和结果。 因此，再次使用 await 检查您的代码并返回相应的输出。