Estoy usando el retroceso de reacción para la gestión de mi estado y tengo un objeto moderadamente anidado que sirve como estado para este componente en particular.

Cuando trato de actualizar el estado con setState (la versión Recoil, sospecho que Vanilla React useState se comportaría de manera similar), tomo la versión anterior del objeto e intento mutarlo un poco antes de devolver el estado actualizado. Pero la reasignación de valores en este objeto falla completamente en silencio, no veo advertencias, pero la asignación de un nuevo valor no tiene ningún efecto. Ejemplo:

 import { useRecoilState} from "recoil"; ... const [state, setState] = useRecoilState(sampleState); const someCallback = () => { setState((oldState) => { const newState = { ...oldState }; console.log(newState.dog.paw); // false newState.dog.paw = true //stopping the debugger here and trying to reassign in the devtools has equally no effect console.log(newState.dog.paw); // false return newState ; }); };

al reasignar durante una sesión de depuración en pausa en las herramientas de desarrollo de Chrome, sucede lo siguiente:

 newState.dog.paw = true true newState.dog.paw false

Soy consciente de que la documentación de React dice que no es aconsejable mutar el objeto de estado directamente, pero de eso a explicar lo que está sucediendo arriba hay un vacío que no sé cómo llenar.

De hecho, también sé cómo solucionar el problema, la solución es reasignar el objeto principal de esta manera:

 newState.dog = {...newState.dog, paw:true}

Habiendo dicho todo eso, estaría agradecido por una visión más profunda sobre lo que está sucediendo allí y por qué este fenómeno se comporta de manera tan extraña en el intérprete/devtools -> la reasignación parece realizarse pero no tiene ningún efecto.