Как исправить проблему с не работающей функцией updateServing в JavaScript?

Question

Я пытаюсь реализовать функцию, которая будет рассчитывать порции ингредиентов с моего сайта.

Эта функция находится в файле Recipe.js и выглядит так:

    updateServings(type) {
        // Servings
        const newServings = type === 'dec' ? this.servings - 1 : this.servings + 1;

        // Ingredients
        this.ingredients.forEach((ingr) => {
        ingr.count = this.capDecimal(ingr.count * (newServings / this.servings));
        });
        this.servings = newServings;
       }

Проблема в том, что когда я console.log (state.recipe);в index.js слушатель этого события работает, он сохраняет консольный журнал state.recipe после нажатия кнопки - или + на веб-сайте, но это не изменит количество обслуживания в объекте рецепта:

elements.recipe.addEventListener('click', e => {
    if(e.target.matches('.btn-decrease .btn-decrease *')){
        //Decrease button is clicked
        if(state.recipe.servings > 1){
            state.recipe.updateServings('dec'); 
        } 
    }else if(e.target.matches('.btn-increase .btn-increase *')){
        //Increase button was clicked
        state.recipe.updateServings('inc'); 

    }
    console.log(state.recipe);
});

Я нажал 2раз, но обслуживание собственности все еще говорит 4 как здесь:

https://forum.toshitimes.com/uploads/toshitimes/original/2X/6/6bada9081879db1a14df9bad010382606fda253f.png

Это более крупный проект, поэтому я считаю, что мне нужно включить весь репозиторий из github: https://github.com/damianjnc/forkifyApp.git

Что мне нужно изменить, чтобы это работало?

Answer 1

Вам необходимо обновить представление после события щелчка

elements.recipe.addEventListener('click', e => {
//....
 try {
    recipeView.clearRecipe();
    recipeView.renderRecipe(state.recipe);
  } catch (error) {
      alert('error processing the recipe:(');
  }

});

Примечание: вам нужно объявить свойства вашего класса

export default class Recipe {
    ingredients;
    servings;
    constructor(id) {
        this.id = id;
    }

и вам нужна карта вместо forEach

this.ingredients = this.ingredients.map((ingr) => {
        ingr.count = this.capDecimal(ingr.count * (newServings / this.servings));
        return ingr;
});