Estoy en el lado más nuevo de React y trato de cambiar el estado de un objeto en una matriz. Actualmente, estoy sacando el objeto de la matriz, cambiando la propiedad en ese objeto y luego agregando el nuevo objeto al estado nuevamente. El problema es que envía el objeto al final de la lista y reordena las entradas de mi casilla de verificación.
const handleChange = (e) => { if (e.target.type === "checkbox") { // Get the role from the current state const roleToChange = input.roles.find( (role) => Number(role.id) === Number(e.target.id) ); // Change checked state to opposite of current state const changedRole = { ...roleToChange, checked: !roleToChange.checked }; // Get every role except the one that was changed const newRoles = input.roles.filter( (role) => Number(role.id) !== Number(e.target.id) ); // Update the role in the state setInput((prevState) => { return { ...prevState, roles: [...newRoles, changedRole] }; }); }¿Puedo actualizar el objeto en la matriz en el lugar para que esto no suceda?
No .filter - .map en su lugar, y devuelva el objeto cambiado en caso de que la ID coincida, de modo que el nuevo objeto se coloque en el mismo lugar en la nueva matriz en el que estaba originalmente.
const handleChange = (e) => { if (e.target.type !== "checkbox") { return; }; const newRoles = input.roles.map((role) => Number(role.id) !== Number(e.target.id) ? role : { ...role, checked: !role.checked } ); setInput((prevState) => { return { ...prevState, roles: newRoles }; }); } A menos que el estado se actualice sincrónicamente antes de esto, lo que suena un poco improbable (pero no imposible), probablemente también puedas usar setInput({ ...input, roles: newRules }) en lugar de la devolución de llamada.