MobX 不变量失败：此时不允许更改状态等副作用答案

【问题标题】：MobX Invariant failed: Side effects like changing state are not allowed at this pointMobX 不变量失败：此时不允许更改状态等副作用
【发布时间】：2017-02-11 10:33:48
【问题描述】：

我是 JS/React/MobX/else 新手，尝试做一些非常简单的事情但没有成功。

我想要的是 - 2 个按钮，一旦单击，使用 react-bootstrap 和 mobx 在模式中显示相应的选项卡。

但我不断收到此错误：

[mobx] 遇到了一个由反应或观察者组件抛出的未捕获异常，在：'Reaction[AuthModal#0.render()] 错误：[mobx] 不变式失败：改变状态等副作用是此时不允许。例如，您是否尝试从 React 组件的渲染函数修改状态？尝试修改：AuthModalStore@3.tab

请帮忙。非常感谢。

商店代码：

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>
      );
    }
  }

【问题讨论】：

你能添加你的<AuthModal />组件代码吗？

标签： react-router react-bootstrap mobx mobx-react

【解决方案1】：

我看到您正在更改 mobx 状态，而包装的代码没有放在动作函数中。

如果一个函数改变了状态，那么它应该被装饰成action

https://mobx.js.org/refguide/action.html

动作应该并且总是用于修改状态的函数。仅执行查找、过滤器等的功能不应标记为操作；允许 MobX 跟踪他们的调用。

另外，如果函数应该绑定到类，那么你可以使用装饰器：

@action.bound

希望我能帮上忙。

【讨论】：

【解决方案2】：

此处提供了答案： 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>

【讨论】：

对我不起作用。还有其他建议吗？我的商店中有一个可观察的数组。我添加了一些项目，当我尝试使用按钮单击事件更新其中一个项目时，我收到此错误
你可能应该提出一个新问题。

【解决方案3】：

如果您想更改商店中的某些内容，您需要使用 action 作为 mobx 状态 here

您的导入应如下所示：

import { action, observable } from 'mobx';

你的函数应该是这样的：

@action
turnOn(key = 1) {
  console.log('running turnOn');
  this.tab = key;
  this.show = true;
}

在 Mobx 中，您不能在 action 之外改变 observable。

【讨论】：