我是一个JS / React / MobX /其他新手,试图做一些非常简单但没有成功的事情。
我想要的是 - 2个按钮,一旦点击,在模态中显示相应的选项卡,使用react-bootstrap和mobx。
但我一直收到这个错误:
[mobx]遇到一个由反应或观察者组件引发的未捕获异常,在:'Reaction [AuthModal#0.render()]错误:[mobx]不变失败:此时不允许更改状态等副作用。您是否尝试从例如React组件的渲染功能修改状态?试图修改:[email protected]
请帮忙。非常感激。
商店代码:
import { observable } from 'mobx';
class AuthModalStore {
@observable show = false;
@observable tab = 1;
constructor() {
this.turnOn = this.turnOn.bind(this);
this.turnOff = this.turnOff.bind(this);
this.changeToTab = this.changeToTab.bind(this);
}
turnOn(key = 1) {
console.log('running turnOn');
this.tab = key;
this.show = true;
}
turnOff() {
this.show = false;
}
changeToTab(key) {
this.tab = key;
}
}
const store = new AuthModalStore();
export default store;
反应成分:
import React from 'react';
import { inject, observer } from 'mobx-react';
import AuthModal from './AuthModal';
@inject('authModalStore')
@observer
export default class AuthButtons extends React.Component {
handleClick(event) {
var key;
switch (event.target.innerHTML) {
case 'Log In':
key = 1;
break;
case 'Sign Up':
key = 2;
break;
default:
key = 1;
}
this.props.authModalStore.turnOn(key);
}
render() {
return (
<div className="nav navbar-nav navbar-right">
{/* login / signup buttons in navbar */}
<ul className="nav navbar-nav btn-toolbar">
<li className="btn-group">
<p className="navbar-btn text-uppercase">
<a onClick={this.handleClick.bind(this)} className="btn btn-default">Log In</a>
</p>
</li>
<li className="btn-group">
<p className="navbar-btn text-uppercase">
<a onClick={this.handleClick.bind(this)} className="btn btn-primary">Sign Up</a>
</p>
</li>
</ul>
<AuthModal />
</div>
);
}
}
我看到你正在改变mobx状态而没有包装代码在动作函数中。
如果函数改变了状态,那么它应该被装饰为action
https://mobx.js.org/refguide/action.html
操作应该且始终用于修改状态的函数。仅执行查找,过滤器等的功能不应标记为操作;允许MobX跟踪他们的调用。
另外,如果函数应该绑定到类,那么你可以使用装饰器:
@action.bound
我希望我帮忙。
答案在这里提供:https://github.com/mobxjs/mobx/issues/829
用这个:
<a onClick={() => this.props.authModalStore.changeToTab(2)}>Not a member yet?</a>
<a onClick={() => this.props.authModalStore.changeToTab(3)} className="pull-right">Forgot password?</a>
代替
<a onClick={this.props.authModalStore.changeToTab(2)}>Not a member yet?</a>
<a onClick={this.props.authModalStore.changeToTab(3)} className="pull-right">Forgot password?</a>
如果你想改变你店里的东西,你需要使用action
作为mobx state here
您的导入应如下所示:
import { action, observable } from 'mobx';
你的功能应该是这样的:
@action
turnOn(key = 1) {
console.log('running turnOn');
this.tab = key;
this.show = true;
}
在Mobx你不能改变observable
之外的action
。