简单的MobX Observable不渲染

Posted 2021-04-08

我有一个简单的React类，用一个MobX来注解。@observer 注释和一个简单的数据结构（注有 @observable data = { .. }. 一个动作更新了这个结构，但确实是渲染。

这里是该类的源代码。-

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没有更新。

答案

刚刚弄明白了! 这是类注解的顺序是很重要的，即。

@withRouter
@observer
class UpdateDetailsForm extends Component {

...

这工作!

但当 @withRouter 是最接近于 class UpdateDetailsForm 它失败了。

在MobX的文档中也发现了这一点 - https:/mobx.js.orgbestpitfalls.html。

_@inject('store') 之前 @observer 将导致MobX不触发_。

所以同样的事情也会发生在 @inject 注释。