MobX console.log() 工作，但 render() 方法不使用 React.Component 更新

Question

MobX 更新了由console.log()發出的 store，但實際上並沒有更新React.Component的render()方法。 我在這個例子中遺漏了什么？

@observer
export class App extends Component {
  constructor(props) {
    super(props);
    this.onClick = this.onClick.bind(this);
  }

  @observable data = {
    error: ""
  };

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

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

代碼沙盒

信用：來自Stackoverflow的原始代碼

Answer 1

在 MobX v6 中，需要在constructor方法中調用makeObservable(this)才能使 class 裝飾器工作。

有關更多信息，請參閱這些文檔。

有關工作示例，請參閱此沙箱。