Creé una aplicación de tareas pendientes que tiene secciones Incompleted , Completed y Deleted . Cada sección Incompleted y Completed tiene botones onClickDelete , y cuando se presiona, se supone que la tarea se envía a la sección Deleted . Sin embargo, se envía a la sección Deleted pero siempre contiene una tarea vacía. Sé que mi código está presionando con éxito varios estados en la matriz, pero no estoy seguro de cómo solucionarlo.
Intenté const newDeletedTodos = [...deleteTodos, incompeleteTodos[index],completeTodos[index]]
o const newDeletedTodos = [...deleteTodos, incompeleteTodos[index]||completeTodos[index]] pero no funcionó.
Agradezco cualquier consejo!
const onClickDelete = (index) => { //works fine const newTodos = [...incompeleteTodos] newTodos.splice(index, 1) //works fine const newCompletedTodos = [...completeTodos] newCompletedTodos.splice(index, 1) //Works strange. const newDeletedTodos = [...deleteTodos] newDeletedTodos.push(incompeleteTodos[index]) newDeletedTodos.push(completeTodos[index] ) setIncompleteTodos(newTodos) setCompleteTodos(newCompletedTodos) setDeleteTodos(newDeletedTodos) }según la sugerencia de @titus, su estado puede ser como
const [todos, SetTodos] = useState<{ id: string; text: string; state: "uncomplete"| "complete"| "deleted" }>([]) const onClickDelete = (id) => { SetTodos(prev => prev.map(x => x.id === id ? {...x, state: 'deleted'} : x )) }Para las actualizaciones de estado de React que dependen del valor anterior, se debe usar el argumento de devolución de llamada. Esto se debe a la naturaleza asíncrona de las actualizaciones de estado ( docs )
P.ej. para eliminar un elemento.
var index = 5; setTodos((todos)=>( todos.filter((t,i)=> ( index != i ) ) Se puede usar un concat similar para agregar a la matriz.