![](/img/trans.png)
[英]Change state's array without changing the whole state (REACT / REDUX)
[英]Array with prototypes changing the redux state
我在React应用程序中使用Redux,在其中我使用ChartJS库制作图表。 我已经注意到,有时当我从全局redux状态中获取数组时,它是这样的:
ejeY: Array(7)
0: 43783
1: 85001
2: 100960
3: 75271
4: 22117
5: 27542
6: 0
length: 7
pop: ƒ ()
push: ƒ ()
shift: ƒ ()
splice: ƒ ()
unshift: ƒ ()
_chartjs: {listeners: Array(1)}
__proto__: Array(0)
__proto__: Object
它具有数组原型,对应于可以应用于数组的方法,但是在数组原型之外,它具有另一种方法。 当数组是这样的,并且我想用某种方法更改数组或使用数组作为值更改组件的状态时,它会更改redux状态而无需调度redux操作。 假设redux道具是只读的,但这改变了redux的状态而没有调度动作。 例如,我使用此方法对两个数组进行排序:
sortMaxToMinEjeX: (array1, array2) => {
var list = [];
for (var j = 0; j < array2.length; j++)
list.push({ 'elemento1': array1[j], 'elemento2': array2[j] });
list.sort((a, b) => {
return ((a.elemento1 > b.elemento1) ? -1 : ((a.elemento1 === b.elemento1) ? 0 : 1));
});
for (var k = 0; k < list.length; k++) {
array1[k] = list[k].elemento1;
array2[k] = list[k].elemento2;
}
return { ejeY: Object.values(array2), ejeX: Object.values(array1) }
}
然后,我使用新的排序数组来更改react组件props克隆组件并将新的排序数组用作props:
cambiarGrafica: ({ labels, datasets }) => {
console.log(labels, datasets);
const { graficas, indice } = this.state;
let nuevasGraficas = graficas.filter((componente, index) => index !== indice);
let graficaSeleccionada;
if (datasets) {
graficaSeleccionada = React.cloneElement(graficas[indice], { labels, datasets });
} else {
graficaSeleccionada = React.cloneElement(graficas[indice], { labels });
}
nuevasGraficas.splice(indice, 0, graficaSeleccionada);
this.setState({ graficas: Object.values(nuevasGraficas) });
}
在使用cambiarGraficas
方法设置状态之前,redux状态不会发生应有的变化,但是当我将graficas
的状态设置为带有新道具的组件的新数组时,它是在更改redux状态而未调度a的情况下行动,不应该发生的事情。 为什么会发生这种情况,如何避免这种情况发生? 为什么数组采用这种格式?
好像您复制了指针并更改了您本不想做的事情的值。 当您执行以下操作时:
list.push({ 'elemento1': array1[j], 'elemento2': array2[j] });
在elemento1
您将获得array1[j]
中该项的指针,这意味着以后再使用此列表并对其进行处理时,基本上就可以更改数组1的原始数据源。
当您使用React.cloneElement
时, React.cloneElement
发生同样的情况。 它创建一个浅表副本:
“使用element作为起点克隆并返回一个新的React元素。生成的元素将具有原始元素的props,而新的props则浅层合并。”
https://reactjs.org/docs/react-api.html#cloneelement
对于您的解决方案,我在这里链接您: https : //medium.com/@gamshan001/javascript-deep-copy-for-array-and-object-97e3d4bc401a在这里您可以看到深层复制和浅层复制的差异。
在复制功能的入口处,可以使用Array.from()
对于数组,我们将使用“ Array.from()”。 Array.from()方法从类似于数组或可迭代对象的对象创建一个新的Array实例。
使用浅拷贝来更改实际数据也会给redux带来很多麻烦。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.