保存 redux 存储时发生突变错误。全部复制并保存

Question

首先，在页面中，数据对象被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}`);

这甚至没有保存到商店

Answer 1

您的问题与浅拷贝有关。此代码...

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

这会将 list 的第一个元素替换为 mainPageList 中的所有元素，留下 store.mainPage.list 的其余部分 as-is。也没有必要在循环中分配 scroll。

保存 redux 存储时发生突变错误。全部复制并保存

Mutation error when saving redux store. All copied and saved

reactjs

react-redux