react hook组件使用mobx，mobx状态更新但react页面不刷新！

我想使用函数组件来重构类组件，在函数组件中使用了hook，同时发现改变mobx状态，页面不刷新，只有改变hook的state页面才更新

store.js

import { observable, action } from "mobx";

class CountStore {
  @observable a = 1;
  @observable b = 2;

  @action
  add = () => {
    this.a++;
  };
  @action
  add2 = () => {
    this.b++;
  };
}

const countStore = new CountStore();
export default countStore;

App.js

import { observer } from "mobx-react";

import React, { useEffect, useState } from "react";

const App = (props) => {
  const [x, setX] = useState(0);

  useEffect(() => {
    console.log(props);
  });

  return (
    <div className="App">
      <div>x:{x}</div>
      <div>{props.store.a}</div>
      <div>{props.store.b}</div>
      <button onClick={setX.bind(null, x + 1)}>set x</button>
      <button onClick={props.store.add}>add按钮1</button>
      <button onClick={props.store.add2}>add2按钮2</button>
      <br />
    </div>
  );
};

export default observer((props) => {
  return <App store={props.store} />;
});

index.js

// 省略一些
ReactDOM.render(<App store={countStore} />, rootElement);

如果使用：export default observer(App);导出，则会报错：Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:

实在是不知道怎么改了，请大 佬帮 忙看 看，十分 感 谢

问题出在当前版本的mobx-react和react不支持使用hook，升级到mobx和mobx-react都为6.1.0版本后问题解决，升级后可以选择两种方式来生成一个store：
方法一：使用makeObservable，但是需要标注一下哪些属性进行转换。
方法二：使用makeAutoObservable，自动转换所有属性，无需装饰器标。
用法注详情参考：mobx快速入门

修改完后代码为：
index.js

import { Provider } from "mobx-react";
import { StrictMode } from "react";
import ReactDOM from "react-dom";

import App from "./App";

import countStore from "./countStore";
const rootElement = document.getElementById("root");
ReactDOM.render(
  <StrictMode>
    <Provider countStore={countStore}>
      <App />
    </Provider>
  </StrictMode>,
  rootElement
);

App.js

import { observer, MobXProviderContext } from "mobx-react";

import React, { useEffect, useState } from "react";

const App = observer((props) => {
  const [x, setX] = useState(0);
  const { countStore } = React.useContext(MobXProviderContext);

  useEffect(() => {
    console.log("1", props);
  });

  return (
    <div className="App">
      <div>x:{x}</div>
      <div>{countStore.a}</div>
      <div>{countStore.b}</div>
      <button onClick={setX.bind(null, x + 1)}>set x</button>
      <button onClick={countStore.add}>add按钮1</button>
      <button onClick={countStore.add2}>add2按钮2</button>
      <br />
    </div>
  );
});

export default App;

countStore.js

import { makeAutoObservable } from "mobx";

class CountStore {
  constructor() {
    makeAutoObservable(this);
  }
  a = 1;
  b = 2;

  add = () => {
    this.a++;
  };

  add2 = () => {
    this.b++;
  };
}

const countStore = new CountStore();
export default countStore;

你把，报错信息截个图

1. You might have mismatching versions of React and the renderer (such as React DOM)
2. You might be breaking the Rules of Hooks
3. You might have more than one copy of React in the same app
   See https://fb.me/react-invalid-hook-call for tips about how to debug and fix this problem.

1.React和渲染器的版本可能不匹配（例如React DOM）
2.你可能违反了钩子的规则
3.同一应用程序中可能有多个React副本

看一下"react"和react-dom"版本是否相同。