Использование .filter для удаления элемента из массива и возврата нового массива - PullRequest
Новая
       24

Использование .filter для удаления элемента из массива и возврата нового массива

0 голосов
/ 01 февраля 2019

Я пытаюсь вернуть новый массив, добавив прослушиватель событий к моей кнопке удаления.С этим прослушивателем событий связана функция, которая выполняет функцию array.filter().Я не уверен, почему это не работает.Я могу console.log о новом массиве, и это нормально, но когда я пытаюсь вернуть новый массив, ничего не происходит.

Я склеивал элемент из массива, и это работало нормально, но я хотел попробоватьиспользуя фильтр.Кажется, что логика есть, и нет ошибки.Но он просто не возвращает новый массив.Это функция removeIngredient, из которой я пытаюсь удалить элемент через его индекс.

const removeIngredient = text => {
  const ingredientIndex = recipeOnPage.ingredients.findIndex(
    ingredient => ingredient.text === text
  )
  const ingredientList = recipeOnPage.ingredients
  const ingredient = ingredientList.filter(
    item => ingredientList.indexOf(item) !== ingredientIndex
  )
  return ingredient
}

const toggleIngredient = text => {
  const ingredient = recipeOnPage.ingredients.find(
    ingredient => ingredient.text === text
  )
  if (ingredient.included) {
    ingredient.included = false
  } else {
    ingredient.included = true
  }
}

const ingredientSummary = recipe => {
  let message
  const allUnchecked = recipeOnPage.ingredients.every(
    ingredient => ingredient.included === false
  )
  const allChecked = recipeOnPage.ingredients.every(
    ingredient => ingredient.included === true
  )

  if (allUnchecked) {
    message = `none`
  } else if (allChecked) {
    message = `all`
  } else {
    message = `some`
  }
  return `You have ${message} of the ingredients for this recipe`
}

const generateIngredientDOM = ingredient => {
  const ingredientEl = document.createElement('label')
  const containerEl = document.createElement('div')
  const checkbox = document.createElement('input')
  const ingredientText = document.createElement('span')
  const removeButton = document.createElement('button')
  recipeStatus.textContent = ingredientSummary(recipeOnPage)

  // Setup ingredient container
  ingredientEl.classList.add('list-item')
  containerEl.classList.add('list-item__container')
  ingredientEl.appendChild(containerEl)

  // Setup ingredient checkbox
  checkbox.setAttribute('type', 'checkbox')
  checkbox.checked = ingredient.included
  containerEl.appendChild(checkbox)
  // Create checkbox button in ingredient div
  checkbox.addEventListener('click', () => {
    toggleIngredient(ingredient.text)
    saveRecipes()
    renderIngredients(recipeId)
  })

  // Setup ingredient text
  ingredientText.textContent = ingredient.text
  containerEl.appendChild(ingredientText)

  // Setup the remove button
  removeButton.innerHTML = '<i class="far fa-trash-alt"></i>'
  removeButton.classList.add('button', 'button--text')
  ingredientEl.appendChild(removeButton)
  // Create remove button in ingredient div
  removeButton.addEventListener('click', () => {
    removeIngredient(ingredient.text)
    saveRecipes()
    renderIngredients(recipeId)
  })

  return ingredientEl
}

const renderIngredients = recipeId => {
  // Grab the ingredient display from the DOM
  const ingredientList = document.querySelector('#ingredients-display')
  ingredientList.innerHTML = ''
  const recipe = getRecipes().find(item => {
    return item.id === recipeId
  })

  // Iterate through the list of ingredients on the page and render all items from recipeDOM
  recipe.ingredients.map(ingredient => {
    const ingredientDisplay = generateIngredientDOM(ingredient)
    ingredientList.appendChild(ingredientDisplay)
  })
  saveRecipes()
}

Ничего не происходит, как я уже говорил выше.Когда я console.log переменной ingredient, я получаю новый массив с удаленным элементом, но когда я возвращаю его, ничего не происходит.

1 Ответ

0 голосов
/ 01 февраля 2019

Если я правильно понимаю структуру, ваш removeIngredient, вероятно, может быть обрезан до: 

const removeIngredient = text => {
  recipeOnPage.ingredients = recipeOnPage.ingredients.filter(i => i.text !== text);
}

Это удаляет ingredient, у которого его свойство text совпадает с параметром text,Вы делаете много ненужных findIndex, чтобы получить filtered ингредиенты и вернуть их.Но вы нигде не устанавливаете его обратно в объект recipeOnPage.

Поскольку вы не используете возвращаемое значение removeIngredient, вам не нужно ничего возвращать

...