javascript - 具有改变 redux 状态的原型(prototype)的数组

Question

我在 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

它具有数组原型(prototype)，对应于可以应用于数组的方法，但在数组原型(prototype)之外，它还有另一种方法。当数组像这样，并且我想使用某种方法更改数组或使用数组作为值更改组件的状态时，它会更改 redux 状态而不分派(dispatch) redux 操作。假设 redux 属性是只读的，但这会在不分派(dispatch)操作的情况下更改 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 组件 Prop ，克隆组件并使用新的排序数组作为 Prop :

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 的状态设置为新数组时具有新 props 的组件，当它更改 redux 状态而不分派(dispatch)操作时，这是不应该发生的事情。为什么会发生这种情况以及如何避免这种情况？为什么数组采用这种格式？

Answer 1

看起来，您复制了指针并更改了您不想做的事情的值。当你做类似的事情时:

list.push({ 'elemento1': array1[j], 'elemento2': array2[j] });

进入elemento1，您将获得array1[j]中项目的指针这意味着当您稍后获取此列表并对其执行某些操作时，您基本上会更改数组 1 的原始数据源。

当您使用React.cloneElement时也会发生同样的情况。它创建一个浅拷贝:

"Clone and return a new React element using element as the starting point. The resulting element will have the original element’s props with the new props merged in shallowly"

https://reactjs.org/docs/react-api.html#cloneelement

对于您的解决方案，我在此处链接您: https://medium.com/@gamshan001/javascript-deep-copy-for-array-and-object-97e3d4bc401a在这里你可以看到深拷贝和浅拷贝的区别。

在复制函数的入口处，您可以使用Array.from()

For array we will use ‘Array.from()’. The Array.from() method creates a new Array instance from an array-like or iterable object.

使用浅拷贝更改真实数据可能会带来很多麻烦，使用 redux 也是如此。