Javascript react mobx-存储显示为函数，而不是返回值

我正在尝试将mobx添加到现有项目中。这个项目是用createreact应用程序启动的，被弹出，然后我在上面添加了mobx。这是我目前的店铺：

从“mobx”导入{可观察、操作、计算}

export default class timerStore {
    @observable message = 'THIS IS FROM THE STORE'

    constructor(count, message) {
        this.message = message;
    }

}

我正在索引组件中将存储区传递给我的应用程序：

render(
  (<Provider timerStore={timerStore}>
      <Router history={hashHistory}>
        <Route component={Main} path="/">
          <IndexRoute component={Tea}/>
          <Route component={About} path="/about"/>
          <Route component={Timer} path="/timer"/>
        </Route>
      </Router>
    </Provider>
  ),
  document.querySelector('#root')
);

@inject("timerStore")
@observer
class Timer extends Component {

    render() {
        const { message } = this.props.timerStore

        return(
            <div className="content-card timer-card">
                <h1 className="title">Tea timer {message}</h1>
            </div>
        )
    }
}

export default Timer;

渲染(
(
),
document.querySelector（“#root”）
);

然后我尝试在计时器组件中引用它：

render(
  (<Provider timerStore={timerStore}>
      <Router history={hashHistory}>
        <Route component={Main} path="/">
          <IndexRoute component={Tea}/>
          <Route component={About} path="/about"/>
          <Route component={Timer} path="/timer"/>
        </Route>
      </Router>
    </Provider>
  ),
  document.querySelector('#root')
);

@inject("timerStore")
@observer
class Timer extends Component {

    render() {
        const { message } = this.props.timerStore

        return(
            <div className="content-card timer-card">
                <h1 className="title">Tea timer {message}</h1>
            </div>
        )
    }
}

export default Timer;

@inject（“timerStore”）
@观察者
类计时器扩展组件{
render（）{
const{message}=this.props.timerStore
返回(
茶定时器{message}
)
}
}
导出默认定时器；

但是没有显示消息字符串，当我在调试器中检查它时（

this.props.timerStore.message

），它显示为未定义

它还将

this.props.timerStore

显示为一个函数，该函数将

计数

，

消息

作为参数

我做错了什么

---

我清除了大部分应用程序逻辑，以保持示例的简单性。如果此处缺少任何需要帮助的信息，请告诉我，我将更新问题。

基本上忘记了在应用程序启动时创建新商店。这就是我的index.js：

import React from 'react';
import {render} from 'react-dom';
import {hashHistory, Router, Route, IndexRoute} from 'react-router';

import { Provider } from 'mobx-react';
import timerStore from './Stores/timerStore';

import './reset.css';

import Main from './Main/Main.component';
import Tea from './Tea/Tea.component';
import About from './About/About.component';
import Timer from './Timer/Timer.component';

const store = new timerStore()

render(
  (<Provider timerStore={store}>
      <Router history={hashHistory}>
        <Route component={Main} path="/">
          <IndexRoute component={Tea}/>
          <Route component={About} path="/about"/>
          <Route component={Timer} path="/timer"/>
        </Route>
      </Router>
    </Provider>
  ),
  document.querySelector('#root')
);

从“React”导入React；
从'react dom'导入{render}；
从“react Router”导入{hashHistory，Router，Route，IndexRoute}；
从“mobx react”导入{Provider}；
从“/Stores/timerStore”导入timerStore；
导入“/reset.css”；
从“/Main/Main.component”导入Main；
从“./Tea/Tea.component”导入茶叶；
从“./About/About.component”导入关于；
从“./Timer/Timer.component”导入计时器；
const store=new timerStore（）
渲染(
(
),
document.querySelector（“#root”）
);