第二次保存到 redux store 时未捕获的不变违规

Question

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

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

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

以前每次调用update都会出现这种情况，但是通过网上的一些解决方案，现在只有在第二次更新值时才会出现这种情况。这是我用来更新状态的代码片段。


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 中创建了一个新对象来保存只有一个级别的数据，但它仍然给我同样的错误。

Answer 1

所以以后遇到这个错误的任何人，让我帮助你不要浪费很多时间，把你的头撞到 table。

这里的问题是我在正确更新 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

希望解决方案的集体努力会有所帮助:)

第二次保存到 redux store 时未捕获的不变违规

Uncaught Invariant Violation on saving to redux store second time

javascript

reactjs

redux

react-redux

redux-reducers