React -MoBX-存储以函数而不是返回值显示



我正在尝试将MOBX添加到现有项目中。该项目是用Create-React-React-App Bootstranded弹出的,然后在其顶部添加了MOBX。到目前为止,这是我的商店:

import {可观察,动作,计算}从'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;

但是没有显示消息字符串,当我在调试器中检查它(this.props.timerStore.message(时,它显示为未定义。

它也将this.props.timerStore显示为以countmessage为参数的函数。

我在做什么错?

我清除了大部分应用程序逻辑,以使示例简单。如果缺少在这里提供帮助的任何信息,请告诉我,我将更新问题。

基本上忘记了在启动应用程序时创建新商店。所以这是我的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')
);

最新更新