React アプリケーションに Mobx を導入しています。アプリケーションはフレームワーク (Flux Redux など) を使用していませんでした。
各コンポーネントで、最初にパッケージのinject
デコレーターを使用して状態を注入します。mobx-react
const React = require('react');
import {observer, inject} from 'mobx-react';
@inject('myState') @observer
class MyComponent extends React.Component{...}
更新時に、コンポーネントの onChange メソッドで状態を直接変更します。状態には objects( blocks
) の配列が含まれ、各ブロックにはいくつかの特定のプロパティがあります。
onChange = (event) => {
this.props.myState['blocks'][this.props.index][event.target.name] = event.target.value;
}
次に、状態から取得した値を使用してコンポーネントをレンダリングします。
render = () => {
const value = this.props.myState['blocks'][this.props.index]['myInput'];
console.log('re rendering...');
return (
<div>
<textarea value={value}
onChange={this.onChange} />
</div>
);
}
しかし、実際には、onChange
が実行されて状態myState
が変更された後、render 関数がトリガーされないようです。
コンポーネントが状態サブスクライバーであっても、再レンダリングがトリガーされない理由について何か提案はありますか?