Сложите все значения из объектов в массиве, но умножьте на количество

#javascript #reactjs #react-hooks

#javascript #reactjs #реагирующие хуки

Вопрос:

Я хочу создать логику для своего приложения с корзиной. Поэтому, когда пользователь нажимает на корзину, он может видеть товары, которые там есть, и видеть общую цену. У меня есть хук, который хранит все объекты внутри и выглядит так:

 [{
foodName: "Njoki with sos"
foodPrice: 35
numberOfPortions: 1
}, 
{
foodName: "Chicken Wingos"
foodPrice: 45
numberOfPortions: 2
}]
  

Я создал логику, которая выглядит следующим образом:

 useEffect(() => {
    cartFood.map((food) => {
      return priceArray.push(food.foodPrice * food.numberOfPortions);
    });
  }, [cartFood]);

  let priceArray = [];

  let cartTotalPrice = priceArray.reduce((a, b) => a   b, 0);
  

Но это не работает, общая цена в корзине равна 0, даже если она должна быть 125, а также я получаю уведомление от React в компиляторе «Эффект использования React Hook имеет отсутствующую зависимость: ‘priceArray’. Либо включите его, либо удалите массив зависимостей» так что, я думаю, есть лучший способ сделать это…
Что я сделал не так и каков наилучший способ записать эту логику?

Большое спасибо!

Комментарии:

1. Если вас не интересует возвращаемое значение Array.prototype.map() , то .map() это не тот инструмент, который нужно использовать.

2. @Andreas Привет, я также пробовал с forEach(), но тот же результат, 0

3. var total = [/*yourarray*/].reduce(function(acc, cur) { return acc cur.foodPrice * cur.numberOfPortions; }, 0);

Ответ №1:

Вы можете использовать любой из методов для перебора вашего массива и получения общей цены

forEach

 let totalPrice = 0;

values.forEach(value => {
  totalPrice  = value.foodPrice * value.numberOfPortions;
});
  

для цикла

 let totalPrice = 0;

for (let i = 0; i < values.length; i  ) {
  totalPrice  = values[i].foodPrice * values[i].numberOfPortions;
}
  

цикл for-of

 let totalPrice = 0;

for (let value of values) {
  totalPrice  = value.foodPrice * value.numberOfPortions;
}
  

уменьшить

 const totalPrice = values.reduce(
  (acc, cur) => acc   cur.foodPrice * cur.numberOfPortions,
  0
);