Mi linter me está acosando.
Hice una función para configurar las tareas completed como !completed con ids como parámetros
Los datos se ven así:
const lists = [ { id: 'todo-3', name: 'Example 3', tasks: [{ name: 'task', completed: true, id: "Un" },{ name: 'task2', completed: true, id: "Deux" },{ name: 'task3', completed: true, id: "Trois" }] } { id: 'todo-4', name: 'Example 5', tasks: [{ name: 'task', completed: true, id: "Un" },{ name: 'task2', completed: true, id: "Deux" },{ name: 'task3', completed: true, id: "Trois" }] } ]Al principio, hice una función como esta y funciona, pero al linter no le gustó.
const toggleTask = (listId: string, taskId: string) => { const newListsToggled = lists.map((listItem) => { if (listItem.id === listId) { listItem.tasks.map((task) => { if (task.id === taskId) { task.completed = !task.completed; } return task; }); } return listItem; }); };"task.completed = !task.completed" esta parte me dio el error No-param-reassign, así que probé otra función:
const toggleTask = (listId: string, taskId: string) => { const newListsToggled = lists.map((listItem) => { if (listItem.id === listId) { return listItem.tasks.map((task) => { if (task.id === taskId) { return {...task, completed: !task.completed} } return task; } ); } return listItem; }); console.log('testtoggle',newListsToggled) }; toggleTask('todo-3','Deux') Este no devuelve la matriz completa, las partes lists.name y lists.id se han ido.
Sin pasar por alto el linter, ¿hay alguna forma de resolver esta función?
La advertencia se activa por el hecho de que en su .map(task => ... ) modifica task (antes de devolverla). La forma en que usa el mapa tiene un efecto secundario en la colección de entrada . Podría ser intencional, o podría ser irrelevante, pero aún está sucediendo.
El propósito de .map() suele ser generar un nuevo objeto/valor de resultado para cada objeto/valor de entrada. (Casi) nunca debe cambiar los valores de entrada, que es lo que está haciendo, solo debe generar valores de salida.
Si realmente desea modificar los valores de entrada, es mejor usar .forEach en su lugar:
if (listItem.id === listId) { listItem.tasks.forEach((task) => { if (task.id === taskId) task.completed = !task.completed; } } return listItem; Esto se puede combinar con .filter en lugar de if :
if (listItem.id === listId) { listItem.tasks .filter(task => task.id === taskId) .forEach(task => task.completed = !task.completed); } return listItem; O si sabe que nunca hay más de 1 tarea coincidente, puede usar .find :
if (listItem.id === listId) { var task = listItem.tasks.find(task.id === taskId); if (task) task.completed = !task.completed; } return listItem;Este no devuelve la matriz completa, las partes Lists.name y Lists.id se han ido.
Para resolver este problema, en lugar de devolver return listItem.tasks.map(...) , puede usar el mismo truco de distribución de objetos que usó con la tarea:
if (listItem.id === listId) { return { ...listItem, tasks: listItem.tasks.map(...) } }