Question

我正在尝试将mobx添加到现有项目中。该项目使用create-react应用程序启动，弹出，然后我在它上面添加了mobx。到目前为止这是我的商店：

从＆＃39; mobx＆＃39;

导入{observable，action，computed}

module.exports = function(req,res) {
  this.req = req;
  this.res = res;
  console.log(this.res);

  this.ok = () => {
    this.res.status(200).end();
  }

  this.err = (err) => {
    console.log(this.res);
    this.res.status(400).json({err:err.message});
  }
};

我将商店传递给索引组件中的应用程序：

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

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

}

然后我试图在Timer组件中引用它：

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，count作为参数的函数。

我做错了什么？

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

Answer 1

基本上忘记在应用启动时创建新商店。所以这是我的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-mobx - 存储显示为函数而不是返回值

1 个答案: