Mobx：创建一个原子存储更新函数？

Question

关于 react mobx 的问题。（尽管我认为这对任何 React 存储库都是通用的）有没有一种方法可以创建原子存储更新功能，而不会导致组件在存储更新期间呈现？

我遇到的问题是：

// 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() 函数执行完后才触发组件渲染。

我怎样才能做到这一点？

Answer 1

当你更新一个可观察对象时，你必须用一个动作来完成它。例如

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

虽然不是 mobx 粉丝 :)

Mobx：创建一个原子存储更新函数？

Mobx: create an atomic store update function?

reactjs

mobx

mobx-react