0
votes

Utiliser réduire pour obtenir le montant total du paiement dans le panier de commerce électronique React

J'essaie de calculer le prix total d'un panier en utilisant une fonction selector / getBasketTotal dans le réducteur. c'est la fonction:

const [{ basket }, dispatch] = useStateValue();
  return (
    <div className="subtotal">
      <CurrencyFormat
        renderText={value => (
          <>
            <p>
              Subtotal ({basket.length} items): <strong>{value}</strong>
            </p>
            <small className="subtotal__gift">
              <input type="checkbox" />
              This order contains a gift
            </small>
          </>
        )}
        decimalScale={2}
        value={getBasketTotal(basket)}
        displayType={"text"}
      />

Voici comment je vais afficher le montant total sur la page Web:

export const initialState = {
  basket: []
};

export const getBasketTotal = basket =>
  basket.reduce((amount, item) => item.price + amount, 0);

La valeur affichera le montant total en appelant la fonction getBasketTotal avec un panier comme paramètre.

Le problème est survenu que le montant total était affiché comme le prix des articles récemment ajoutés au lieu de la somme totale des articles dans le panier. Puis-je faire quelque chose pour résoudre ce problème?

javascript reactjs

1 commentaires

Votre fonction getBasketTotal semble correcte, bien que je getBasketTotal vous demander si tous les articles ont une propriété de price de type number. Avez-vous un exemple d'ensemble d'état du panier pour tester votre implémentation?

3 Réponses :

0
votes

Vous devez utiliser react-hooks .

Dans votre cas, useMemo() semble correct.

const [{ basket }, dispatch] = useStateValue();

const getBasketTotal = React.useMemo(() => {
  return basket.reduce((amount, item) => item.price + amount, 0);
}, [basket]);

return { .... }

0 commentaires

-1
votes

Votre prix dans l'état du panier doit être: price = {9999999}

Probablement ajouté: price = "9999999"

0 commentaires

0
votes

Je pense que votre fonction de réduction est fausse. S'il s'agit d'un objet comme {price: 4}, vous devez renvoyer un objet avec une clé de prix.

const prices = [
    { price: 3 },
    { price: 4 },
    { price: 5 }
]



console.log('Correct Reduce', prices.reduce((a, b) => ({ price: a.price + b.price })))


console.log('Map before Reduce', prices.map(x => x.price).reduce((a,b) => a+b))

Alternativement, vous effectuez une carte avant de réduire pour extraire le prix.

basket.map(x => x.price).reduce((amount, item) => amount+item);

Exemple d'extrait

basket.reduce((amount, item) => ({ price: item.price + amount.price }));

0 commentaires