1
私は反応の中で簡単なカウンタを構築するためにMobxを使用しようとしています。私はそれがクラスの値を更新していることがわかりますが、更新された値は反応ビューで更新されていません。ここでmobxが反応しないビューを更新しています
は、私はちょうどJSFiddleにあなたのコードを試してみましたが、問題なく実行するように思わ
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')
);
コードが正しいように見えます。コンソールにエラーが表示されますか? –