Estoy trabajando en React. Estoy usando useState para mantener un objeto en estado. Para hacer un cambio en el objeto y devolverlo, puedo usar el operador de propagación así...
const [formWizard, setFormWizard] = useState(FORM_CONTROLS.steps[index]); ... const addSection = section => { ... setFormWizard(wizard => ({ ...wizard, wizard: formWizard.controls[14].group.push(...subjectAddressCopy.slice(0, 5)) })); }Pero, ¿y si necesito hacer varios cambios? Intenté poner una coma entre ellos, usar && y envolverlo en un objeto (aunque creo que eso cambiaría la estructura de datos). En cualquier caso conocido de esas cosas funcionó.
setFormWizard(wizard => ({ ...wizard, wizard: formWizard.controls[14].group.push(...subjectAddressCopy.slice(0, 5), formWizard.controls[14].trash) // how can I also make this change? })); Para que quede claro, quiero agregar la propiedad de trash a mi objeto y establecerlo en verdadero. ¿Cómo puedo hacer dos cambios en formWizard y devolverlo?
Es una mala práctica mutar el estado, que es lo que haces cuando push .controls[14].group . La razón de esto es que, en algunos casos, React no notará el cambio y, por lo tanto, no activará el re-renderizado.
Además, no debe tener un nuevo estado que dependa del estado anterior, a menos que ese estado provenga de la actualización funcional de setState. La razón de esto es que el estado anterior podría no estar actualizado si hay varias actualizaciones en cola. En su sugerencia, mezcle el wizard (que es el estado anterior en el que puede confiar), con formWizard (que es el estado anterior en el que no puede confiar). Aquí solo use wizard .
Para actualizar .controls[14].group y .controls[14].trash sin mutación, puede hacer lo siguiente
setFormWizard(wizard => { const controls = wizard.controls[14] const groups = [...controls.group, ...subjectAddressCopy.slice(0, 5)] return ({ ...wizard, controls: [ ...wizard.controls.splice(0,14), // keep first 14 entries { ...controls, group: groups, trash: true } // modify the 15th entry ...wizard.controls.splice(15) // keep the succeeding entries ], wizard: groups.length }); }); Estoy de acuerdo con Brandon y creo que no desea el resultado de la operación de inserción en la propiedad del wizard . Pero como parece seguro de que eso es lo que quiere, wizard: groups.length le da lo mismo.
Utilizo el operador de propagación para crear nuevas matrices y objetos. Aquí hay un artículo sobre enfoques alternativos. https://medium.com/@kkranthi438/dont-mutate-state-in-react-6b25d5e06f42
La respuesta era algo obvia. Publicando esto aquí en caso de que alguien más se encuentre con esta pregunta. En mi función setFormWizard, solo estaba devolviendo un objeto, por lo que si quiero mutar el objeto más de una vez, puedo mutarlo arriba de la declaración de devolución y luego simplemente devolverlo.
setFormWizard(wizard => { wizard.controls[14].trash = true; return ({ ...wizard, wizard: formWizard.controls[14].group.push(...subjectAddressCopy.slice(0, 5)), }); });