React + Mobx：店舗を更新しようとしたときに 'this'はnullです

Question

ちょうどMobx​​を使い始める&店舗を更新するのに問題があります。私はおそらくいくつかを見逃している

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

export default class Layout extends React.Component{ 

    render(){ 

     var store = this.props.store; 

     return(
      <div> 
       <button onClick={store.change_me}>{store.me}</button> 
      </div> 
     ) 

    } 
} 

：

Store.js:12 Uncaught TypeError: Cannot set property 'me' of null 

マイストア：

import { observable } from 'mobx'; 

class Store { 

    @observable me; 

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

    change_me(){ 
     this.me = 'test 1'; 
     console.log(this); // null??? 
    } 

} 

const store = new Store(); 

export default store; 

コンポーネント]ボタンをクリックしたとき、私は '私' プロパティを更新する必要のある、エラーが発生しますどのようにこの作品の基本的な部分が、それを把握することはできません。

Answer 1

私はよく分かりませんmobxしかし、onClick={store.change_me}は、クラスとしてのメソッドを（thisなし）使用しているので問題です。

onClick={event => store.changeMe(event)} 

そうstoreへの結合が失われた：あなたは、のようなものの使用を使用する必要があります。

も可能ですが、あまり読み：

onClick={store.changeMe.bind(store)} 

Answer 2

@Sulthanが述べたように、あなたは他の関数onClick={()=>store.changeMe()}で包まれたメソッドを持っている必要があります。 2番目の問題は、値を更新するメソッドのためにactionデコレータがないことです。 Mobxは、プロパティを更新するすべてのメソッドで、@actionで装飾する必要がある方法で動作します。だから次の問題を修正しますimport {action} from 'mobx、

@action change_me(){ 
    this.me = 'test 1'; 
}