问题描述
据我所知,当我克隆一个数组时,如果我对其克隆应用任何操作,它就会变得不可变。像这里,例如:
const test = () => {
let array = [1,2,3,4]
let spreadArray = [...array]
spreadArray.forEach((item,i) => spreadArray[i] = 'changed')
console.log(array)
console.log(spreadArray)
}
<button>TEST</button>
可以看出它工作正常。
但是,我尝试在 ReactJs
中使用我从 Redux
接收为数组的道具来执行此操作,我在克隆数组上申请 forEach,但是当我记录结果时,我可以看到两个数组都已更改。
我的数组是这样的:
const productsData = [
{
id: 1,nome: 'Produto 1',qtde: 10,valor: 12.00
},{
id: 2,nome: 'Produto 2',qtde: 100,{
id: 3,nome: 'Produto 3',qtde: 90,valor: 13.00
},{
id: 4,nome: 'Produto 4',{
id: 5,nome: 'Produto 5',qtde: 80,valor: 12.50
},]
这就是我正在做的:
updateQtdeHandler = (arg,id) => {
let productsList = [...this.props.productsList]
productsList.forEach((product,i) => {
if (product.id === id) {
if (arg === 'up') {
productsList[i].qtde = product.qtde+1
productsList[i].valorTotal = product.qtde * product.valor
}
if (arg === 'down') {
productsList[i].qtde = product.qtde-1
productsList[i].valorTotal = product.qtde * product.valor
}
}
})
console.log(productsList) // CLONE
console.log(this.props.productsList) // ORIGINAL ARRAY
//BOTH ARRAYS ARE BEING CHANGED
}
我在这里接收数组:
const mapStatetoProps = state => {
return {
productsList: state.productsDataState
}
}
我看过的每个地方都支持我的理解,但我就是不明白。
我在这里做错了什么?
或者我做错了什么,这实际上应该是使用 redux 时的正确行为?
解决方法
暂无找到可以解决该程序问题的有效方法,小编努力寻找整理中!
如果你已经找到好的解决方法,欢迎将解决方案带上本链接一起发送给小编。
小编邮箱:dio#foxmail.com (将#修改为@)