React + Mobx : 상점을 업데이트하려고하면 'this'가 null입니다.

Question

그냥 Mobx로 시작하십시오 & 저장소가 업데이트되는 데 문제가 있습니다. '나'속성을 업데이트해야합니다 버튼을 클릭 할 때 나는 오류 :

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; 

:

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> 
     ) 

    } 
} 

내가 아마 놓친 일부 어떻게 작동하는지의 근본적인 부분이지만 그것을 이해할 수는 없습니다.

Answer 1

잘 모르겠 음 mobx 그러나 onClick={store.change_me}은 (this없이) 클래스로 메서드를 사용하고 있기 때문에 문제가됩니다. 그렇지 않으면 store에 결합이 끊어

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

: 당신은 같이 사용 무언가를 사용해야합니다.

또한 가능 미만 읽을 수는 : @Sulthan가 언급 한 바와 같이

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

Answer 2

, 다른 기능 onClick={()=>store.changeMe()} 래핑하는 방법이 필요합니다. 두 번째 문제는 값을 업데이트하는 방법에 대해 action 데코레이터가 누락되었습니다. Mobx는 속성을 업데이트 할 모든 메소드가 작동하는 방식으로 작동합니다. @action으로 꾸며야합니다. 그럼 다음 문제를 해결할 것입니다 import {action} from 'mobx,

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