Wednesday, 11 May 2022

How do I call react function in js map?

I have the below code, the problem is in the part where I am calling the RemoveProduct function in the map function:

function AddOrder() {
    const d = new Date();
    let text = d.toString();
    const [addOrder] = useMutation(queries.ADD_ORDER);
    const [editUser] = useMutation(queries.EDIT_USER_CART);
    const [editProduct] = useMutation(queries.EDIT_PRODUCT);

    function RemoveProduct (x)  {

        let getProd = useQuery(queries.GET_PRODUCTS_BY_ID, {
          fetchPolicy: "network-only",
          variables: {
            _id : x._id
          },
        });
        console.log(getProd.quantity)
        console.log(x.quantity)
        let a = getProd.quantity - x.quantity
        console.log(a)
        editProduct({
          variables: {
            _id : x._id,
            quantity: a
          },
        });
        return null;
    }

    const { currentUser } = useContext(AuthContext);

    if (error) {
        return <h1> error</h1>;
    } else if (loading) {
        return <h1> loading</h1>;
    } else if (data && getUserOrders.data && currentUser && data.getUser.cart.length > 0) {
        let newCart = [];
        let total = 0;
        for (let i = 0; i < data.getUser.cart.length; i++) {
            total += data.getUser.cart[i].price * data.getUser.cart[i].quantity;
            newCart.push({
                orderedQuantity: data.getUser.cart[i].quantity,
                _id: data.getUser.cart[i]._id,
                name: data.getUser.cart[i].name,
                image: data.getUser.cart[i].image,
                price: data.getUser.cart[i].price,
            });
        }
        
        newCart.map((x) => RemoveProduct(x))

    

        editUser({
            variables: {
                id: currentUser.uid,
                cart: [],
            },
        });
    }
    
}
export default AddOrder;

I get the following error when I run this code:

Uncaught Error: Rendered more hooks than during the previous render.

How can I fix this? I tried to create a separate component for RemoveProducts and call in this function but that did not work either.



from How do I call react function in js map?

No comments:

Post a Comment