Reactjs 保存 redux 存储时发生Mutations 错误.全部复制并保存

发布于03月28日

首先，在页面中，使用usestate更改数据对象并绘制屏幕！离开页面时保存滚动值和数据，以记住页面上的滚动值.作为确认的结果，更改的值被保存，但当我回来时，这个错误会不断出现.

const mainPageCopy = { ...store.mainPage };
mainPageList.forEach(function (value, index) {
  mainPageCopy.list[index] = value;
  mainPageCopy.scroll = document.querySelector(".body").scrollTop;
});
dispatch({ type: "mainPage/set", payload: mainPageCopy })
router.push(`/product/${value.product_seq}`);

这甚至没有保存到store

推荐答案

你的问题与肤浅的复制有关.这个代码...

const mainPageCopy = { ...store.mainPage };

创建store.mainPage的浅拷贝.由于list属性是数组，因此副本将引用store中的同一对象.在forEach()循环中对它们进行更改是触发错误的原因.

试试这个

const mainPageCopy = {
  ...store.mainPage,
  scroll: document.querySelector('.body').scrollTop,
  list: [
    ...mainPageList, 
    ...store.mainPage.list.slice(mainPageList.length),
  ],
};

dispatch({ type: "mainPage/set", payload: mainPageCopy });

这将用mainPageList中的所有元素替换list中的第一个元素，剩下的store.mainPage.list保持不变.也不需要在一个循环中分配scroll.