¿Cuál es la forma correcta de actualizar el estado, en un objeto anidado, en React with Hooks?
export Example = () => { const [exampleState, setExampleState] = useState( {masterField: { fieldOne: "a", fieldTwo: { fieldTwoOne: "b" fieldTwoTwo: "c" } } }) ¿Cómo se usaría setExampleState para actualizar exampleState a (agregar un campo)?
const a = { masterField: { fieldOne: "a", fieldTwo: { fieldTwoOne: "b", fieldTwoTwo: "c" } }, masterField2: { fieldOne: "c", fieldTwo: { fieldTwoOne: "d", fieldTwoTwo: "e" } }, } } b (cambio de valores)?
const b = {masterField: { fieldOne: "e", fieldTwo: { fieldTwoOne: "f" fieldTwoTwo: "g" } } })Puede pasar un nuevo valor como este:
setExampleState({...exampleState, masterField2: { fieldOne: "a", fieldTwo: { fieldTwoOne: "b", fieldTwoTwo: "c" } }, })Si alguien está buscando la actualización de ganchos useState () para el objeto
- Through Input const [state, setState] = useState({ fName: "", lName: "" }); const handleChange = e => { const { name, value } = e.target; setState(prevState => ({ ...prevState, [name]: value })); }; <input value={state.fName} type="text" onChange={handleChange} name="fName" /> <input value={state.lName} type="text" onChange={handleChange} name="lName" /> *************************** - Through onSubmit or button click setState(prevState => ({ ...prevState, fName: 'your updated value here' }));En general, debe tener cuidado con los objetos profundamente anidados en el estado React. Para evitar un comportamiento inesperado, el estado debe actualizarse inmutablemente. Cuando tienes objetos profundos, terminas clonándolos profundamente para lograr la inmutabilidad, lo que puede ser bastante costoso en React. ¿Por qué?
Una vez que clone profundamente el estado, React recalculará y volverá a representar todo lo que depende de las variables, ¡aunque no hayan cambiado!
Entonces, antes de intentar resolver su problema, piense primero cómo puede aplanar el estado. Tan pronto como lo haga, encontrará herramientas útiles que le ayudarán a lidiar con estados grandes, como useReducer().
En caso de que lo hayas pensado, pero aún estés convencido de que necesitas usar un árbol de estado profundamente anidado, aún puedes usar useState() con bibliotecas como immutable.js e Immutability-helper . Facilitan la actualización o la clonación de objetos profundos sin tener que preocuparse por la mutabilidad.