Mobx：创建原子存储更新功能？答案

【问题标题】：Mobx: create an atomic store update function?Mobx：创建原子存储更新功能？
【发布时间】：2018-02-27 10:03:32
【问题描述】：

关于 react mobx 的问题。（虽然我认为它对任何反应商店库都是通用的）有没有办法创建一个原子商店更新功能，而不会导致组件在商店更新期间呈现？

我遇到的问题是这样的：

// store.js
class Store {
  constructor() {
    extendObservable(this, {
      array: [1, 2],
      i: 1
    },

    get current_element() {
      return this.array[this.i];
    }
  }

  update(array, i) {
    this.array = array;
    this.i = i;
  }
}


component.js
// ...
render() {
  return <div>store.current_element</div>
}

现在当我调用store.update([0], 0) 时，我收到一个索引超出范围的错误。原因是，在store.update()函数内部，在第一行（this.array = array;）执行后，触发了组件的渲染。因此，该组件试图引用数组[0] 的索引1，这会引发索引越界错误。我想避免这种情况，只在整个store.update()函数执行完毕后才触发组件渲染。

我怎样才能做到这一点？

【问题讨论】：

标签： reactjs mobx mobx-react

【解决方案1】：

当你更新一个 observable 时，你必须通过一个动作来完成它。例如

@action setFirstName = firstName => (this.firstName = firstName);
@action setLastName = lastName => (this.lastName = lastName);

虽然不是 mobx 粉丝 :)

【讨论】：