mobxオブザーバの変更後に再レンダリングしないでください

Question

ページが読み込まれると、「hi2」が表示されます ボタンをクリックすると何も起こりません。私もsetUserで試しました。

私はちょうどその小道具自体を編集していると思うし、どういうわけか観察可能なものが引き起こされていないのだろうか？それの

参照のサンプルコードでは、ブランドの新しいレール/反応した環境で、ここで働いていません：https://github.com/bufordtaylor/mobxtest

1. クローン
2. バンドル
3. レールの
4. （別のプロセスで）./bin/ webpack-dev-server --host 127.0.0.1
5. localhostに移動します。3000

======================

UPDATE：私はそれが可能なインポートエラーを排除し、基本的な形だし、それを削減しました

、プロバイダエラー、またはコンストラクターのエラーです。

ここでは、

import React from 'react' 
import ReactDOM from 'react-dom' 
import { observable, action, computed } from 'mobx'; 
import { Provider, inject, observer } from 'mobx-react'; 


class UserStore { 

    @action setUser(val) { 
    console.log(val); 
    this.user = val; 
    } 

    @observable user = "default"; 
} 

const userStore = new UserStore(); 

@observer 
class Hello extends React.Component { 
    render() { 
    return (
     <div> 
     hi2 {this.props.userStore.user} 
     <button onClick={this.props.userStore.setUser.bind(this,"fwefwe")}>faew</button> 
     </div> 
    ) 
    } 
} 

document.addEventListener('DOMContentLoaded',() => { 
    ReactDOM.render(
    <Hello userStore={userStore} />, 
    document.getElementById('app'), 
) 
}) 

Answer 1

コードが鳴っています。私はあなたがドキュメントのHow to (not) use decoratorsの部分で議論された問題を遭遇したと思います。 transform-decorators-legacyがbabelプラグインのリストの最初にあることが重要です。

Answer 2

<button onClick={this.props.userStore.setUser.bind(this,"fwefwe")}>faew</button> 

は注意が必要です。あなたはバインディングthisです。この場合のThisはHelloコンポーネントのインスタンスです。これで、setUser関数のthisがHelloコンポーネントを指しています。そのため、setUserはHelloコンポーネントのプロパティユーザーを設定します。

@action setUser(val) { 
    console.log(val); 
    this.user = val; // This this now points to the Hello Component. 
    } 

つまり、setUserメソッドにブレークポイントを設定し、変数thisを調べることができます。 Helloインスタンスがストアコンポーネントではなく、Helloコンポーネントを指していることがわかります。

<button onClick={() => { this.props.userStore.setUser("fwefwe"); }}>faew</button> 

ここで私は、ユーザーストアにSETUSERを呼び出しラムダを作成しています：

は、代わりに次の操作を行います。 ここでラムダを使用しているため、this.props.userStoreのthisはHelloコンポーネントを指しています。