为什么过滤器方法似乎没有像这个TODO应用中的剪接一样工作方式？

Question

我在JS中有一个具有以下功能的todo应用程序：

这是将ID传递到事件侦听器以删除

removeButton.addEventListener('click', function () {
                removeTodo(todo.id)
                renderTodos(todos, filters)
            })

此函数的函数 的一部分删除待办事项并使新的todos罚款 - 我认为我评论的过滤方法也可以使用，但它确实删除了todo，但是除非我刷新页面，否则它不会自动更新浏览器中的列表，虽然剪接是自动的，但为什么会发生这种情况？可以在RenderTodos开始阅读列表之前等待更新本地存储吗？只需注意，在不起作用的示例中，我将newtodos传递到了保存功能中，我只是以拼接方式将其更改为Todos。

const removeTodo = function (id) {
const todoIndex = todos.findIndex(function (todo) {
    return todo.id === id
})

if (todoIndex > -1) {
    todos.splice(todoIndex, 1)
}
// newTodos = todos.filter(function (todo) {
//     return todo.id !== id
// })
saveTodos(todos)
}

TODO列表保存在本地存储中

const saveTodos = function (todos) {
    localStorage.setItem('todos', JSON.stringify(todos))
}

，这是信息的渲染功能

const renderTodos = function (todos, filters) {
        const filteredTodos = todos.filter(function (todo) {
            const searchTextMatch = todo.text.toLowerCase().includes(filters.searchText)
            const hideCompletedMatch = !filters.hideCompleted || !todo.completed
            return searchTextMatch && hideCompletedMatch
        })
            
        const todosLeft = filteredTodos.filter(function (todo) {
            return !todo.completed
        })
        document.querySelector('#todos').innerHTML = ''
        document.querySelector('#todos').appendChild(generateSummaryDom(todosLeft))

        filteredTodos.forEach(function (todo) {
            document.querySelector('#todos').appendChild(generateTodoDom(todo))
        })
}

Answer 1

splice（）突变todos您然后呈现的数组，而filter（）返回一个不使用的新数组。

为了使其与filter（）一起使用，您需要从删除函数返回newtodos并渲染返回的数组，而不是原始todos大批。

removeButton.addEventListener('click', function () {
  const newTodos = removeTodo(todo.id);
  saveTodos(newTodos)
  renderTodos(newTodos, filters);
})

const removeTodo = function (id) {
  return todos.filter(todo => todo.id !== id)
}

const saveTodos = function (todos) {
  localStorage.setItem('todos', JSON.stringify(todos))
}

Answer 2

重新分配变量没有副作用；重新分配一个标识符对其他地方的标识符没有影响。做

  newTodos = todos.filter(function (todo) {
    return todo.id !== id
  })
  saveTodos(todos)
}

意味着您已经将一些结果放入newtodos中，而无需做任何其他事情。它不会放入存储（或渲染，尽管未显示渲染方式）。

沿着新的过滤戒酒传递，然后从那里渲染（无论您正在这样做） - 不要忘记声明您的变量。

  const newTodos = todos.filter(function (todo) {
    return todo.id !== id
  })
  saveTodos(newTodos);
  renderTodos(newTodos);

在直接侦听器回调中删除RenderTodos时。