Estoy trabajando en un proyecto React donde tengo una lista de tareas que se pueden "editar". Mi proceso de pensamiento es cuando el usuario hace clic en editar, llena el formulario con la información de las tareas actuales, y cuando hace clic en "guardar edición", simplemente encuentra la clave en la que se encuentra la tarea, la elimina y luego crea una nueva tarea con un clave nueva, pero toda la demás información es la misma. Sin embargo, cuando intento esto, parece que no funciona y simplemente elimina la tarea.
Aquí hay un fragmento, espero que ayude:
var saveHandler = (e) => { e.preventDefault(); props.seteId(props.editTask.id); //set the old task's key props.setTasks([ //add our "edited" task to the list with the form info, and new key. ...props.tasks, { text: props.inputText, status: props.status, id: Math.random() * 1500, //I know this isnt a great way to do it priority: props.priority, }, ]); props.setTasks(props.tasks.filter((el) => el.id !== props.eId)); //find old task and delete itEl estado se actualiza de forma asíncrona.
Está llamando a props.setTasks dos veces, pero el valor de props.tasks no cambia entre ellos, por lo que está sobrescribiendo (no construyendo sobre) el primer cambio de estado que realiza.
Use una variable para almacenar su estado intermedio en su lugar.
const allTasks = [ ...props.tasks, { /* etc */ } ]; const updatedTasks = allTasks.filter( /* etc */ ); props.setTasks(updatedTasks); Del mismo modo, props.eId no se habrá actualizado a tiempo para el.id !== props.eId , así que use props.editTask.id en lugar de props.eId en su función de filtro.
Si entiendo bien sus necesidades, esto debería solucionar su problema, probando usando la identificación anterior props.editTask.id
var saveHandler = (e) => { e.preventDefault(); props.seteId(props.editTask.id); //set the old task's key props.setTasks([ //add our "edited" task to the list with the form info, and new key. ...props.tasks, { text: props.inputText, status: props.status, id: Math.random() * 1500, //I know this isnt a great way to do it priority: props.priority, }, ]); props.setTasks(props.tasks.filter((el) => el.id !== props.editTask.id)); //find old task and delete it