Error: Mobx Provider: The set of provided stores has changed.

呕心沥血，终于解决了这个坑爹的报错！！！

在使用mobx时候，开启项目热更新，修改了mobx中store的值，会导致页面报错，报错内容如下

Error:  Mobx Provider: The set of provided stores has changed. See: https://github.com/mobxjs/mobx-react#the-set-of-provided-stores-has-changed-error.

原因是修改了store中的值，app会再次刷新，Store会重新创建并应用到Provider上。

因此，使用下面的代码，这样即使在 app.js 中重新渲染 Store，它也不会发生变化。

import App from "next/app";
import React from "react";
import { Provider } from "mobx-react";
import RootStore from "../stores";

interface State {
  Store: RootStore;
}

export default class MyApp extends App<{}, State> {
  state: State = {
    Store: new RootStore()
  };
  render() {
    const { Component, pageProps } = this.props;

    return (
      <Provider {...this.state.Store}>
          <Component {...pageProps} />
      </Provider>
    );
  }
}

原理是将 Store 作为 State 进行管理，则仅在第一次渲染时才会创建新的 Store，即使之后重新渲染时也可以使用现有的 Store。