时间戳

首页 > 解决方案 > 简单的 MobX Observable 不渲染

reactjs - 简单的 MobX Observable 不渲染

问题描述

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

标签： reactjsmobxmobx-react

解决方案

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

@withRouter
@observer
class UpdateDetailsForm extends Component {

...

这行得通！

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

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

_@inject('store')before@observer会导致 MobX 不触发_

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

推荐阅读