11

Mobx を使用すると、ストアを更新した後 (つまり、ボタンをクリックした後)、コンポーネントが再レンダリングされません。初期ロード後に何も表示されない mobx devtools をインストールしましたが、コンソールにエラーはありません。私が間違ったことをしたアイデアはありますか？

Store.js:

import { observable } from 'mobx';

class Store {

    @observable me;

    constructor() {
        this.me = 'hello';
    }

    change_me(){
        this.me = 'test 1234';

    }

}


export default Store;

レイアウト.js:

import React from "react";
import { observer } from 'mobx-react';


@observer
export default class Layout extends React.Component{

    render(){

        return(
            <div>
                <h1>{this.props.store.me}</h1>
              <button onClick={this.on_change}>Change</button>
            </div>
        )
    }

    on_change = () => {
        this.props.store.change_me();
    }
}

index.js:

import React from "react";
import ReactDOM from "react-dom";
import Layout from "./components/Layout";
import Store from "./Store";
import DevTools, { configureDevtool } from 'mobx-react-devtools';

// Any configurations are optional
configureDevtool({
    // Turn on logging changes button programmatically:
    logEnabled: true,
    // Turn off displaying conponents' updates button programmatically:
    updatesEnabled: false,
    // Log only changes of type `reaction`
    // (only affects top-level messages in console, not inside groups)
    logFilter: change => change.type === 'reaction',
});


const app = document.getElementById('app');
const store = new Store();

ReactDOM.render(

    <div>
        <Layout store={store} />
        <DevTools />
    </div>
, app);
4

4 に答える 4

0

私の推測では、初期化されていない @observable があると思います。これは非常に直感に反しますが、Babel はそれらをうまく処理できません。追加しても@observable me = undefined役立つ場合があります (そこに何かを割り当てるときに、生成された js コードを参照してください。通常、コンストラクターを完全に削除し、初期化を宣言 (つまり@observable me = "hello"、コンストラクターなし) に移動します。その後、正常に動作するはずです。

于 2016-11-20T22:30:37.290 に答える
-1

this コンテキストのバインディングを確認してください。

<button onClick={this.on_change}>Change</button>

this 参照はクラスに対するものではないため、実際にクリックすると、未定義の小道具がないという行に沿って何かを言う可能性があります。変更:

  <button onClick={this.on_change.bind(this)}>Change</button>

それを修正する必要があります。または、さらに良いことに、コンストラクターでコンテキストをバインドして、すべてのレンダリングで再バインドしないようにします

 constructor(props) {
   super(props)
   this.on_change = this.on_change.bind(this)
 }

その後、あなたはあなたに戻ることができます

于 2016-11-20T18:57:42.400 に答える