javascript - react : Sort function causing retroactive side effects my store?

Question

工具:

Reactjs 0.14.0

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

---

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

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

后来我终于发现数据发送到存储后正在调用排序。

像这样:

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或vector来解决这个问题。

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

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

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