variable est NaN dans la méthode de classe mobx (observable - mobx)

Question

Je suis en train d'essayer de mettre à jour la variable observable compteur, et regarder les valeurs dans le composant, quand je clique sur le bouton d'incrément, this.counter est NaN toujours et ne pouvait pas comprendre pourquoi . composant:

@observer 
class App extends Component { 
    constructor(props){ 
    super(props) 
    } 
    render() { 
    const counter = this.props.appState; 
    return (
     <div className={styles.description}> 
      <button onClick={counter.increment.bind(this)}>+</button> 

Mobx classe;

class AppState{ 
    @observable counter=0 

    increment(){ 
     debugger //its null.. 
     this.counter++; 
    } 
} 
export default AppState 

mainjs:

import AppState from './AppState' 
... 
var appState = new AppState 

ReactDOM.render(
    <App appState={appState}/>, 
    document.getElementById('root') 
); 

comment puis-je résoudre ce problème?

Answer 1

Je pense que votre problème est que vous devez garder une langue tranchante quand il s'agit de ce que this se réfère à. Il n'y a pas de champ counter dans App, et c'est ce que vous finissez par essayer lorsque vous écrivez bind(this).

Essayez <button onClick={() => counter.increment()}>+</button>.