Javascript Mobx react无渲染，但状态已更改

我决定尝试Mobx，并面临组件对存储库中不断变化的字段缺乏响应的问题。我看过类似的话题，但我仍然不明白问题是什么。如果在更改后将属性值打印到控制台，则可以看到实际结果

index.js

import React from 'react';
import ReactDOM from 'react-dom';

import { Provider } from "mobx-react";
import AppStore from "./AppStore";

import App from './App';

ReactDOM.render(
  <React.StrictMode>
    <Provider AppStore={AppStore}>
      <App />
    </Provider>
  </React.StrictMode>,
  document.getElementById('root')
);

。您还必须使您的类可以通过手动方式进行观察

类应用商店{
@可观测计数器=0；
构造函数（）{
使可观察（这）；
}
@动作增量=（）=>{
this.counter=this.counter+1；
}
@动作减量=（）=>{
this.counter=this.counter-1；
}
}

。您还必须使您的类可以通过手动方式进行观察

类应用商店{
@可观测计数器=0；
构造函数（）{
使可观察（这）；
}
@动作增量=（）=>{
this.counter=this.counter+1；
}
@动作减量=（）=>{
this.counter=this.counter-1；
}
}

import React, { Component } from "react";
import { inject, observer } from "mobx-react";

@inject('AppStore')
@observer class App extends Component {
  render() {
    const { AppStore } = this.props;
    console.log(AppStore);
    return(
      <div className="App">
        { this.props.AppStore.counter }
        <hr/>
        <button onClick={this.props.AppStore.increment}>+</button>
        <button onClick={this.props.AppStore.decrement}>-</button>
      </div>
    )
  }
}

export default App;

import { observable, action } from "mobx";

class AppStore {
  @observable counter = 0;
  @action increment = () => {
    this.counter = this.counter + 1;
    console.log(this.counter);
  }
  @action decrement = () => {
    this.counter = this.counter - 1;
    console.log(this.counter);
  }
}

const store = new AppStore();
export default store;