React Mobx - 저장소 변경 후 구성 요소가 업데이트되지 않습니다.

Question

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; 

layout.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); 

Answer 1

나는 당신의 change_me에 @Action을 추가하여 시작할 것

() 함수 . 내가 이해하는 바에 따르면, 항상 완전히 필요한 것은 아니지만, 필자가 코드를 추가하는 것을 잊어 버렸을 때, 필자는이 코드를 여러 번 본 적이있다.

또한 @mweststrate가 제안한대로 .babelrc를 게시하십시오. 다른 사람들이 적절한 플러그인이로드되었는지 확인하는 데 도움이됩니다.

Answer 2

이 컨텍스트의 바인딩을 확인하십시오. 당신이 실제로는 정의에 아무런 소품의 라인을 따라 뭔가 말을하려고 클릭하는 경우

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

는이 참조는 클래스에 너무 가능성이되지 않습니다. 변경 대상 :

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

수정해야합니다. 또는 더 나은 아직, 그래서 그것의하지 모든에 다시 바인딩

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

는 다음 초기화되지 않은 @observable을하는 것입니다 귀하의

Answer 3

내 생각 엔으로 돌아갈 수 렌더링 생성자의 컨텍스트를 바인딩합니다. 그것은 매우 반 직관적이지만 바벨은 그것을 잘 다루지 못합니다. @observable me = undefined도 추가 할 수 있습니다. (생성 된 js 코드를 거기에 할당 할 때 참조하십시오. 일반적으로 생성자를 완전히 제거하고 초기화 (예 : @observable me = "hello" 생성자 없음)를 이동하면 정상적으로 작동합니다.