Réagissez pas de modification après le changement d'observateur mobx

Question

Lors du chargement de la page, je vois "hi2" Lorsque je clique sur le bouton, rien ne se passe. J'ai aussi essayé avec setUser.

Je suppose que je suis en train d'éditer les accessoires eux-mêmes et d'une manière ou d'une autre l'observable n'est pas déclenchée?

Voir le code de l'échantillon de celui-ci ne fonctionne pas ici dans une nouvelle marque rails/réagir environnement: https://github.com/bufordtaylor/mobxtest

1. clone
2. paquet
rails s
4. (dans un autre processus) ./bin/ webpack-dev-server --host 127.0.0.1
5. naviguer vers localhost: 3000

======================

MISE À JOUR:

Je l'ai réduit à sa forme de base, ce qui élimine les erreurs d'importation possibles, fournisseur des erreurs ou des erreurs de constructeur.

Ici, il est

import React from 'react' 
import ReactDOM from 'react-dom' 
import { observable, action, computed } from 'mobx'; 
import { Provider, inject, observer } from 'mobx-react'; 


class UserStore { 

    @action setUser(val) { 
    console.log(val); 
    this.user = val; 
    } 

    @observable user = "default"; 
} 

const userStore = new UserStore(); 

@observer 
class Hello extends React.Component { 
    render() { 
    return (
     <div> 
     hi2 {this.props.userStore.user} 
     <button onClick={this.props.userStore.setUser.bind(this,"fwefwe")}>faew</button> 
     </div> 
    ) 
    } 
} 

document.addEventListener('DOMContentLoaded',() => { 
    ReactDOM.render(
    <Hello userStore={userStore} />, 
    document.getElementById('app'), 
) 
}) 

Answer 1

Votre code semble solide. Je pense que vous avez trébuché sur un problème discuté dans la partie How to (not) use decorators de la documentation. Il est important que transform-decorators-legacy soit le premier dans la liste des plugins babel.

Answer 2

<button onClick={this.props.userStore.setUser.bind(this,"fwefwe")}>faew</button> 

Soyez prudent. Vous liez this. This dans ce cas est l'instance du composant Hello. Maintenant, le this dans la fonction setUser pointe vers le composant Hello. Ainsi, setUser définira un utilisateur de propriété dans le composant Hello.

@action setUser(val) { 
    console.log(val); 
    this.user = val; // This this now points to the Hello Component. 
    } 

Pour comprendre ce que je veux dire, vous pouvez définir un point d'arrêt sur la méthode setUser, vérifiez la variable cela. Vous verrez qu'il pointe vers le composant Hello et non vers l'instance de votre magasin.

faire au lieu de ce qui suit:

<button onClick={() => { this.props.userStore.setUser("fwefwe"); }}>faew</button> 

Ici, je suis un lambda qui crée appelle setUser sur le magasin d'utilisateurs. Parce que j'utilise un lambda ici, le this dans this.props.userStore pointe vers le composant Hello.