Soy relativamente nuevo en React-Redux y enfrentaba un problema en el que, si actualizo el estado de un parámetro reductor por primera vez, se ejecuta perfectamente, luego, si lo ejecuto nuevamente con un valor diferente, arroja esta excepción en mi bloque de prueba/captura:
Invariant Violation: A state mutation was detected between dispatches, in the path "object1.object2.0.object3.0.value"Ahora agregué otra actualización para el estado cada vez que detecta la excepción, y después de la primera excepción, los estados se actualizan en consecuencia y no dan ninguna excepción para más actualizaciones.
Anteriormente, sucedía con cada llamada de actualización, pero después de algunas soluciones en línea, ahora solo sucede cuando el valor se actualiza por segunda vez. Aquí está el fragmento de código que estoy usando para actualizar mi estado.
let tempObject3 = [ { name : "param1", value = "", } { name : "param2", value = "", } { name : "param3", value = "", } ]; const component = (props) = { //this state variable is updated every time there is a change in the form const [formState, setFormState] = React.useState({ value1 : "", value2 : "", value3 : "", }); const updateState = async () = { const temp = async () = { // have used other cloning libraries like just-clone and spread operator and JSON.parse(JSON.stringify(object)) let object2Copy = _.cloneDeep(props.object2); for(var i=0; i<object2Copy.length; i++) { let object2ElementCopy = _.cloneDeep(object2Copy[i]); if(object2ElementCopy.name === "desiredName") { //code for populating tempObject3, with modified data from formState state variable if('object3' in object2ElementCopy) { let object3Copy = _.cloneDeep(object2ElementCopy.object3) object2ElementCopy = {...object2ElementCopy, object3 : tempObject3} } else { object2ElementCopy.object3 = tempObject3; } object2Copy[i] = object2ElementCopy } } return object2Copy; } try { props.updateObject2(await temp()); } catch(e) { //update after which no further exceptions are caught props.updateObject2(await temp()); console.log(e); } } }Algunos métodos y objetos usados aquí se pasan a accesorios a través de MapDispatchToProps y MapStateToProps.
La excepción solo surge cuando lo actualizo por segunda vez, aunque el mismo reductor funciona bien en otros componentes sin necesidad de async y await.
Sí, sé que la lógica debería estar en el reductor, pero incluso he intentado hacerlo y sigue ocurriendo la misma excepción. Incluso creé un nuevo objeto en el reductor para guardar estos datos en los que solo tiene un nivel, todavía me estaba dando el mismo error.
Entonces, cualquiera que enfrente este error en el futuro, déjame ayudarte a no perder mucho tiempo y golpearte la cabeza contra la mesa.
El problema aquí es que recibí el error la segunda vez después de actualizar correctamente el objeto 3. Lo que sucedía cada vez en el código era que estaba usando el mismo tempObject3 para escribir nuevos valores.
Ahora, ¿por qué estaba dando un error la segunda vez? porque la primera vez que lo actualicé en redux, ese objeto creó una referencia a la tienda redux, ahora cada vez que intento actualizarlo, se usó la misma referencia y no se creó un nuevo tempObject3 , por lo tanto, Invariant Violation .
Entonces, cualquier persona que enfrente este error o algo similar, haga esto antes de actualizar el valor del objeto nuevamente: -
tempObject3_copy = _.cloneDeep(tempObject3); //logic for updating tempObject3Copy with new values // update to redux store after updating object with new valuesEspero que este esfuerzo colectivo para la solución sea útil :)