简单的 MobX Observable 不渲染

Question

我有一个简单的 React class，带有 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 没有更新。

Answer 1

刚弄明白！ class 注释的顺序很重要，即

@withRouter
@observer
class UpdateDetailsForm extends Component {

...

这有效！

但是当 @withRouter 是最接近 class UpdateDetailsForm 的注释时，它失败了。

还在 MobX 文档中找到了这个 - https://mobx.js.org/best/pitfalls.html

_@inject('store') before @observer will cause MobX to not trigger_

因此 @inject 注释也会发生同样的事情。

Answer 2

只需检查您的 mobx 版本。在 mobx 版本 6 之前，这将起作用。从版本 6 开始，您需要在构造函数中添加一个额外的 makeObservable(this)。

This 为官方主题。

MobX before version 6 did not require the makeObservable(this) call in the constructor, but because it makes the implementation of decorator simpler and more compatible, it now does. This instructs MobX to make the instances observable following the information in the decorators -- the decorators take the place of the second argument to makeObservable.

简单的 MobX Observable 不渲染

Simple MobX Observable not Rendering

reactjs

mobx

mobx-react