MobX不変式が失敗しました：状態の変更などの副作用はこの時点では許可されていません

Question

私はJS/React/MobX/else初心者です。

私が欲しいのは、反応したブートストラップとmobxを使用して、モーダルで対応するタブを2回クリックすると表示されます。

しかし、私はこのエラーを得続ける：「反応[AuthModal＃の0.render（）]エラー：[mobx

は[mobx]に、反応またはオブザーバーコンポーネントによってスローされたキャッチされない例外が発生しました]不変式が失敗しました：状態の変更などの副作用は、この時点では許可されていません。たとえば、Reactコンポーネントのレンダリング機能から状態を変更しようとしていますか？変更を試みました：AuthModalStore@3.tab

助けてください。とても有難い。ストアの

コード：

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

Answer 1

答えがここに提供された： https://github.com/mobxjs/mobx/issues/829

使用本：

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; 

成分を反応

<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>