MobX Invariant не удалось: побочные эффекты, такие как изменение состояния, не допускаются на данный момент

Question

Я новичок в JS/React/MobX/else, пытаясь сделать что-то очень простое без успеха.

Что я хочу - 2 кнопки, один раз щелкнув, покажите соответствующую вкладку в модальном режиме, используя реакционную бутстрап и mobx.

Но я получаю эту ошибку:

[mobx] Обнаружено неперехваченное исключение, сброшенный компонент реакции или наблюдателя, в: «Реакции [AuthModal # 0.render()] Ошибка: [mobx ] Invariant failed: побочные эффекты, такие как изменение состояния, на данном этапе не допускаются. Вы пытаетесь изменить состояние из, например, функции рендеринга компонента 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> 
    ); 
    } 
    } 

Answer 1

ответ был представлен здесь: 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>