Question

我试图通过将事件侦听器添加到我的删除按钮来返回一个新数组。与该事件侦听器连接的是一个运行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时，我得到了删除了项的新数组，但是当我返回它时，什么也没发生。

Answer 1

如果我正确理解结构，则可以将您的removeIngredient缩小为：

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

这将删除与ingredient参数具有text属性的text。您正在做很多不必要的findIndex来获取filtered成分并将其返回。但是，您无处将其设置回recipeOnPage对象。

由于您没有使用removeIngredient的返回值，因此无需返回任何内容

使用.filter从数组中删除项目并返回新数组

1 个答案: