如何阻止redux状态发生突变

Question

这以某种方式改变了我的redux状态。我不知道为什么:allProducts是一个状态在我的商店与initial_state[]和获取值从API调用。

const [products, setProducts] = useState([])
const prevProducts = [...allProducts];
setProducts(prevProducts);
const updateProductPrice = (newPrice, index) => {
const newProducts = [...products];
newProducts[index].price = newPrice;
setProducts(newProducts);
console.log(allProducts);
}

当我输入console.log(allProducts)时，它显示了一个更新的数组，其中包含newProducts

的值

Answer 1

我认为你所看到的与JavaScript如何在数组中存储对象引用有关。当您复制一个数组时，您不会对其中的所有对象进行完整的重新创建，即使在使用扩展操作符时，您也只是复制对每个索引处对象的引用。

换句话说，假设它们共享匹配的索引，newProducts[i] === allProducts[i]中的每个项目-即是完全相同的对象实例。

例如，请参阅https://javascript.info/object-copy，并且有许多"shallow"的参考资料。和";deep"复制对象

Answer 2

对象在内存中是相同的，即使我改变了引用。

"赋值给对象的变量存储的不是对象本身，而是它的"内存地址"——换句话说，是对对象的"引用"。

我用_。cloneDeep from https://lodash.com/docs/4.17.15#cloneDeep

所以我把代码改成:

const prevProducts = _.cloneDeep(allProducts);
setProducts(prevProducts);

另一个解决方案:如果您不想使用lodash。Clonedeep包，你可以使用下面的命令:

const array = [{a: 1}]//initial array
const copy = array.map(item => ({...item}))