0

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 関数がトリガーされないようです。

コンポーネントが状態サブスクライバーであっても、再レンダリングがトリガーされない理由について何か提案はありますか?

4

0 に答える 0