reactjs - react + Mobx : 'this' is null when trying to update store

Question

刚刚开始使用 Mobx 和 React，在更新商店时遇到困难。单击按钮时出现错误，这应该更新“me”属性:

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

是的，this 为 null 时会 react 执行事件回调。因为您只为 onClick 回调提供了 change_me 方法，而不是 store 作为上下文。

解决方案

您必须自己设置this上下文。您可以通过以下方式执行此操作

不良做法:

正如@Eduard所说，你可以将它转换成箭头函数。箭头函数确保函数体内的 this 上下文保持不变:

<button onClick={() =>store.change_me()}>{store.me}</button> 

您还可以使用bind方法:

<button onClick={store.change_me.bind(store)}>{store.me}</button>

这基本上做同样的事情。

为什么它们是不好的做法？在每次调用 render() 时，都会重新创建这些方法。并可能导致额外不必要的重新渲染。

良好实践

mobx 提供了一个 action.bound，它使用正确的 this 上下文包装函数:

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

或者，es6 类定义允许您自己正确定义 this 上下文:

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

参见箭头函数。在幕后:而不是在 Store 类的原型(prototype)上定义函数/方法。该方法是在构造函数中创建的，以便this上下文变量始终与类的实例匹配。

这样:

var a = new Store(); // a.me = 'test'
var b = new Store(); // b.me = 'test'
a.change_me = b.change_me; // change_me function contains its own this context.
a.change_me(); // a.me = 'test' b.me = 'test 1'