Простой наблюдаемый MobX без рендеринга - PullRequest
Новая
       66

Простой наблюдаемый MobX без рендеринга

0 голосов
/ 28 мая 2020

У меня есть простой класс React, аннотированный аннотацией MobX @observer и простая структура данных (помеченная @observable data = { .. }. Действие обновляет эту структуру, но выполняет рендеринг.

Вот исходный код class: - 

import React, {Component, Fragment} from 'react';
import {observer} from "mobx-react";
import {observable} from "mobx";
import {withRouter} from 'react-router-dom';

@observer
@withRouter
class UpdateDetailsForm extends Component {

  constructor(props) {
    super(props);
    this.onClick = this.onClick.bind(this);
  }

  @observable data = {
    error: ""
  };

  onClick () {
    this.data.error = "error has occurred";
    console.log("Something has happened!");   // testing purposes
  }

  render() {
    return (
      <div>
        <div className="red">[ {this.data.error} ]</div>
        <input type="button" value="Click Me!" onClick={this.onClick} />
      </div>      
    );
  }

}

Однако, когда я нажимаю кнопку, консоль отображает ... 

Something has happened!

... что доказывает, что состояние data изменено, но HTML не обновляется.

1 Ответ

0 голосов
/ 28 мая 2020

Только что разобрался! Порядок аннотаций классов важен, т.е. 

@withRouter
@observer
class UpdateDetailsForm extends Component {

...

Это работает!

Но когда @withRouter является ближайшей аннотацией к class UpdateDetailsForm, это не удается.

Также найдено это в документации MobX - https://mobx.js.org/best/pitfalls.html

_@inject('store') до того, как @observer приведет к тому, что MobX не будет запускать_

Итак, то же самое происходит с аннотацией @inject.

...