mobx-react创建可观察的存储

Question

我已经玩了很长一段时间了，我不确定这是不可能的，还是我只是在ES6、React或MobX中缺少了一些基本的东西。

我想有一个mobx商店在一个单独的文件，如下所示；

import { observable, action } from 'mobx';

export default class Store {

@observable data = [];

@action getAll(){
  this.data = [{
    itemTitle: 'Item One'
  },{
    itemTitle: 'Item Two'
  }]
  return this.data
}

@action pushItem(item){
  this.data.push(item)
}

addAfter5Secs(){
  setTimeout(() => {
    console.log('Item Added')
    this.pushItem({
    itemTitle: 'Item Two'
  })}, 5000)
}

constructor() {
  console.log('Store Created')
  this.getAll();
  this.addAfter5Secs()
}
}

然后，我想在视图中导入它，并在那个时候创建存储的实例。

import React from "react";
import { List, Button } from 'semantic-ui-react';
import { observer, inject } from 'mobx-react';
import Store from '../Data/Store';
import DevTools from 'mobx-react-devtools';

const dataItems = new Store

@observer
export default class ScriptsHome extends React.Component {
  render() {
    const items = observer(dataItems)
    return (
        <List>
        {items.data.map((reg, key) => {
          return(
            <List.Item key={key}>
                     <Button content={reg.itemTitle}/>
                </List.Item>)
          })}
          <DevTools />
        </List>
    );
  }
}

我不想通过根组件中的提供程序传递它，也不希望用导出中的'new‘关键字实例化存储。我实际上有几十个商店，所以我只想通过视图根据需要创建它们。

以上代码将呈现前2项，第3项仅在5秒后添加到存储区，但呈现不会自动在组件上触发，因此项目不会出现。当我强制render函数触发时，它就会出现。

我用路由器来调用这个视图，所以这也是个问题吗？

我只是学习Mobx，反应等，所以任何帮助都是非常感谢的。所有的例子似乎只使用一两家商店。

Answer 1

因此，在花了一点时间在这个问题上，事实证明，这与MobX完全无关。react和react路由器的版本似乎是问题所在。现在使用，这很好。