#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
);