Question

我正在尝试编写一个MobX存储，该存储在构造函数中异步加载数据。问题是，当我尝试更新@observable时，它不会触发更改，因此React组件永远不会更新。

那是商店（实际上，setTimeout是服务器调用）：

class MyStore {
  @observable isLoading = true;

  constructor() {
    setTimeout(() => {
      this.isLoading = false; // won't update the React component!
    }, 1000);
  }
}

此组件将阻止应用程序，直到加载完成：

const MyComponent = ({store, children}) =>
  store.isLoading ?
    <div>Loading, please wait...</div> :
    children;

export default inject('store')(MyComponent);

如何在商店构造函数中触发更新？

Answer 1

在提供的代码中，您的组件未标记为观察者，使它成为观察者应该可以解决问题。您可以使用@observer软件包提供的mobx-react装饰器来完成此操作。

请注意，您应该使用observer before inject

如何异步地在商店构造函数上加载MobX数据？

1 个答案: