Question

我使用的是React 15.5.4和Redux 3.6.0。

目前，我正在通过Redux将一个对象数组传递给容器。这反过来又将数组传递给列表组件。该列表将根据选择的排序顺序对数组重新排序，并将每个项目发送给它自己的单独组件。列表或单个组件中没有任何操作，列表只能更改它自己的状态。出于某种原因，当列表改变顺序时，它也改变了它的父组件的顺序。这毫无意义。

没有调度任何操作，并且没有从列表上升到容器的函数。重新排序的列表本身不会被设置为状态或保存在任何地方。我只是映射它。当list-component使用通过props传递给它的列表时，Container的道具正在改变，这是错误的，但我不知道为什么会这样。

之前有没有人见过这个问题或者知道原因是什么？

Answer 1

所以这可能是Javascript的一个东西，而不是React：

let arr1 = [6,5,4,3,2,1]
let arr2 = arr1
console.log(arr1) // [6, 5, 4, 3, 2, 1]
console.log(arr2) // [6, 5, 4, 3, 2, 1]

//note that at this point, they have the same values in the same order
arr1.sort() //sort arr1, NOT arr2
console.log(arr1) //[1, 2, 3, 4, 5, 6]
console.log(arr2) //[1, 2, 3, 4, 5, 6]

请注意，即使我们没有更改arr2，它仍然是有序的。这是因为您将引用传递给数组本身，而不是新数组/您在arr2上所做的任何更改都将反映在arr1上，因为它们都是相同的数组，您只是< em>调用两个不同的名字。

将数组从容器传递给对它们进行排序的组件时，将其传递给＆＃34;传播＆＃34;它进入另一个数组，就像这个arr2 = [...arr1]那样，arr1和arr1都是不同的数组，而arr2上的变化不会反映在arr1上。

有关点差运算符的更多信息：https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Spread_operator

有用的东西！也适用于数组和对象。

Answer 2

您可能需要将一个shouldComponentUpdate函数添加到父组件，并根据数据更改控制何时/是否应该更新。

您可以在此处查看文档：{{3}}

容器道具在儿童状态发生变化后发生变化

2 个答案: