刚刚开始使用 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>
)
}
}
我可能错过了其工作原理的一些基本部分,但无法弄清楚。
最佳答案
是的,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'
关于reactjs - react + Mobx : 'this' is null when trying to update store,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/40702028/