第二次保存到redux存储时发生未捕获的不变冲突

Question

我对React Redux还比较陌生，遇到了一个问题，如果我第一次更新reducer参数的状态，它会完美地执行，然后如果我用一些不同的值再次执行它，它会在我的try/catch块中抛出这个异常：

Invariant Violation: 
A state mutation was detected between dispatches, in the path "object1.object2.0.object3.0.value"

现在，每当状态捕捉到异常时，我都会为其添加另一个更新，在第一个异常之后，状态会相应地更新，并且不会为任何进一步的更新提供任何异常。

以前，每次更新调用都会发生这种情况，但在一些在线解决方案之后，现在只有在第二次更新值时才会发生这种情况。这是我用来更新状态的代码片段。

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);
}
}
}

这里使用的一些方法和对象通过MapDispatchToProps和MapStateToProps传递给props。

只有当我第二次更新它时，才会出现异常，尽管相同的reducer在其他组件中运行良好，不需要异步和等待。

是的，我知道逻辑应该在reducer中，但我甚至尝试过这样做，同样的异常不断发生。我甚至在reducer中创建了一个新对象来保存这个只有一个级别的数据，但它仍然给了我同样的错误。

Answer 1

所以，任何将来会面临这个错误的人，让我帮助你不要浪费很多时间，把你的头撞在桌子上。

这里的问题是，我在更新object3之后第二次出现错误。代码中每次发生的情况是，我使用相同的tempObject3来写入新值。

为什么第二次出现错误？因为我第一次在redux中更新它时，该对象创建了一个对redux存储的引用，现在每隔一次我尝试更新它，都会使用相同的引用，但没有创建新的tempObject3，因此创建了Invariant Violation。

因此，任何面临此错误或类似错误的人，请在再次更新对象的值之前执行此操作：-

tempObject3_copy = _.cloneDeep(tempObject3);
//logic for updating tempObject3Copy with new values 
// update to redux store after updating object with new values

希望这一解决方案的集体努力将有所帮助：(