简单的 MobX Observable 不渲染答案

【问题标题】：Simple MobX Observable not Rendering简单的 MobX Observable 不渲染
【发布时间】：2020-09-15 14:55:09
【问题描述】：

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

【问题讨论】：

标签： reactjs mobx mobx-react

【解决方案1】：

刚刚想通了！这是类注释的顺序很重要，即

@withRouter
@observer
class UpdateDetailsForm extends Component {

...

这行得通！

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

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

_@inject('store') 在@observer 之前会导致 MobX 无法触发_

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

【讨论】：

【解决方案2】：

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

This 是官方主题。

MobX 6 之前的版本不需要在构造函数中调用 makeObservable(this)，但因为它使装饰器的实现更简单、更兼容，所以现在需要。这指示 MobX 根据装饰器中的信息使实例可观察——装饰器代替了 makeObservable 的第二个参数。

【讨论】：