React + Mobx: 'this' ist null, wenn versucht wird, den Laden zu aktualisieren

Question

Erste Schritte mit Mobx & Reagieren und Probleme beim Aktualisieren des Geschäfts haben. Ich erhalte Fehler, wenn die Schaltfläche klicken, die das 'Ich' Eigenschaft aktualisieren sollte:

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

Mein Speicher:

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; 

Die Komponente:

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

    } 
} 

ich wohl verpasst haben einige grundlegender Teil davon, wie das funktioniert, aber ich kann es nicht herausfinden.

Answer 1

Ich weiß nicht, mobx aber onClick={store.change_me} ein Problem ist, weil Sie eine Methode für eine Klasse als eine Funktion (ohne this) verwenden. Sie müssen Verwendung so etwas wie verwenden:

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

sonst die Bindung an store verloren.

auch möglich, aber weniger lesbar:

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

Answer 2

Wie @Sulthan erwähnt, müssen Sie die Methode durch eine andere Funktion onClick={()=>store.changeMe()} gewickelt haben. Zweite Ausgabe fehlt Ihnen action Dekorator für die Methode, die den Wert aktualisiert. Mobx funktioniert so, dass jede Methode, die Eigenschaften aktualisiert, von @action gestaltet werden muss. So wird das Problem beheben import {action} from 'mobx,

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