Tengo una aplicación de tareas pendientes en JS con las siguientes funciones:
Esto es parte de una función que pasa una identificación a un detector de eventos para eliminar una tarea pendiente
removeButton.addEventListener('click', function () { removeTodo(todo.id) renderTodos(todos, filters) })Esta función elimina las tareas pendientes: he usado 2 enfoques, la forma findIndex funciona muy bien, elimina las tareas pendientes y hace que los nuevos todos estén bien. Pensé que el enfoque de filtro que he comentado también funcionaría, pero no lo hace, lo hace. elimine el todo pero no actualiza automáticamente la lista en el navegador a menos que actualice la página, mientras que splice lo hace automáticamente, ¿por qué podría suceder esto? ¿Podría estar esperando actualizar el almacenamiento local antes de que renderTodos comience a leer la lista? Solo una nota de que en el ejemplo que no funcionó, estaba pasando newTodos a la función de guardar, solo lo cambié a todos para la forma de empalme.
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) }la lista de tareas se guarda en el almacenamiento local
const saveTodos = function (todos) { localStorage.setItem('todos', JSON.stringify(todos)) }Aquí está la función de renderizado para obtener información.
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)) }) }Reasignar una variable no tiene efectos secundarios; la reasignación de un identificador no tiene ningún efecto sobre los identificadores en otros lugares. Haciendo
newTodos = todos.filter(function (todo) { return todo.id !== id }) saveTodos(todos) } significa que ha puesto algunos resultados en newTodos sin hacer nada más con él. No se almacena (ni se procesa, aunque no se muestra cómo se procesa).
Pase los nuevos todos filtrados y renderice (como sea que lo esté haciendo) desde allí, y no olvide declarar sus variables.
const newTodos = todos.filter(function (todo) { return todo.id !== id }) saveTodos(newTodos); renderTodos(newTodos); mientras saca renderTodos de la devolución de llamada inmediata del oyente.
splice() muta la matriz de todos que luego está procesando, mientras que filter() devuelve una nueva matriz que no está utilizando.
Para que funcione con filter() , deberá devolver los newTodos desde la función de eliminación y representar la matriz devuelta, no la matriz original de 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)) }