React：排序功能导致我的商店产生追溯副作用？

Question

工具：

Reactjs 0.14.0

Vanilla Flux（不确定这是否会影响此问题的性质。

我运行今天遇到了一个让我摸不着头脑的错误。 在我的商店中，我试图访问数组中的第一个元素，但它不是预期的元素。

我确实在数组进入商店时打印了它，甚至在它发出商店已更新并且数组看起来应该是它应该的但如果我访问它，例如 data[0] 它不是打印输出显示。

后来终于发现在数据发送到store后调用了一个sort

像这样：

ServerActionCreators.receiveData(data);
data.sort(mySortingFunction);

我的问题：

为什么商店里的数据会被追溯更新？ React 开发人员如何确保这些追溯副作用不会影响他们存储的同步操作？

Answer 1

出现此问题是因为您和商店都持有对 相同数组 的引用，并且 sort 方法对其进行了修改。

可以通过远离直接改变数组的方法来避免这种行为（push、pop、shift、unshift、reverse 和 sort) 或在执行任何这些操作之前复制数组。

var data = [ ... ];

// give the store a reference
MyStore.sendData(data);

// copy the reference before mutating it
var sorted = copy(data).sort(sortFn);

// continue to work with the copy
// ...

有多种方法可以复制对象或列表，具体取决于您使用的 Javascript 版本。

// ES7
const copy = list => [...list]
// ES6
const copy = list => Object.assign([], list);
// ES5
function copy(list) {
  return list.map(function(item) {
    return item;
  });
}

或者，您可以使用不可变 list or vector 来解决此问题。

// mori.js
var data = mori.vector( ... ),
    sorted = mori.sort(sortFn, data);

// immutable.js
var data = Immutable.list( ... ),
    sorted = data.sort(sortFn);

根据定义，当您调用它们的方法时，这些数据结构不会发生变化。

React：排序功能导致我的商店产生追溯副作用？

React: Sort function causing retroactive side effects my store?

javascript

sorting

reactjs

reactjs-flux