reactjs - mobx 不更新反应视图

Question

我正在尝试使用 Mobx 构建一个简单的反应计数器。我可以看到它正在更新类中的值，但更新的值没有在反应视图中更新。

这是我的代码

import {observable} from 'mobx';
import {observer} from 'mobx-react';
import React, {Component} from 'react';
import ReactDOM from 'react-dom';

class CounterStore {
  @observable counter;

  constructor(){
    this.counter = 0;
  }

  increase(){
    this.counter++;
  }

  decrease(){
    this.counter--;
  }
}

@observer
class Counter extends Component {
  render(){
    const counter = this.props.counter;
    return(
      <div style={{display: 'flex'}}>
        <button onClick={counter.increase.bind(counter)}>+</button>
        <p style={{color: 'black', marginRight: '1rem', marginLeft: '1rem'}}>{counter.counter}</p>
        <button onClick={counter.decrease.bind(counter)}>-</button>
      </div>
    );
  }
}

const store = new CounterStore();

ReactDOM.render(
  <Counter counter={store} />,
  document.getElementById('app')
);

Answer 1

我刚刚在 JSFiddle 中尝试了您的代码，它似乎运行没有问题？

http://jsbin.com/bocabefuji/1/edit?html,js,控制台,输出