Reactjs 使用mobx和nextjs显示@computed值时出错

我的应用程序使用mobx和nextJS时出错

开发工具中显示的错误是：

index.js:1 Warning: Did not expect server HTML to contain the text node "3" in <h1>.
    in h1 (at pages/index.tsx:18)
    in div (at pages/index.tsx:17)
    in Post (created by inject-with-notesStore(Post))
    in inject-with-notesStore(Post) (at _app.tsx:32)
    in Container (at _app.tsx:31)
    in MobXProvider (at _app.tsx:30)
    in CustomApp
    in Container (created by AppContainer)
    in AppContainer

stores.ts

import { observable, action, computed } from "mobx";
import { fetchNotes } from "../api";

export interface INotes {
  createdAt?: number;
  updatedAt?: number;
  __v?: number;
  _id?: number;
  title: string;
  todos: {
    description: string;
    checked: boolean;
    id: boolean;
  }[];
}

class NotesStore {
  @observable notes: INotes[] = observable([]);
  @observable testArray = ["a", "b", "c"];
  
  constructor(initialData = {} as { notes: INotes[] }) {
    this.notes = initialData.notes;
  }

  async fetch() {
    const processedResponse = await fetchNotes();
    this.setNotes(processedResponse);
  }

  @computed get test() {
    return this.testArray.length;
  }

  @action setNotes(notes) {
    this.notes = notes;
  }
}

export default NotesStore;

import { useStaticRendering } from "mobx-react";

import NotesStore, { INotes } from "./testStore";

const isServer = typeof window === "undefined";
useStaticRendering(isServer);

let store = null;

export default function initializeStore(
  initialData = { notesStore: {} as NotesStore }
) {
  if (isServer) {
    return {
      notesStore: new NotesStore(initialData.notesStore),
    };
  }
  if (store === null) {
    store = {
      notesStore: new NotesStore(initialData.notesStore),
    };
  }

  return store;
}

页面/u app.tsx

import React from "react";
import App, { Container } from "next/app";
import { Provider } from "mobx-react";

import initializeStore from "../mobx/stores";

class CustomApp extends App {
  mobxStore: any;
  static async getInitialProps(appContext) {
    const mobxStore = initializeStore();
    appContext.ctx.mobxStore = mobxStore;
    const appProps = await App.getInitialProps(appContext);
    return {
      ...appProps,
      initialMobxState: mobxStore,
    };
  }

  constructor(props) {
    super(props);
    const isServer = typeof window === "undefined";
    this.mobxStore = isServer
      ? props.initialMobxState
      : initializeStore(props.initialMobxState);
  }

  render() {
    const { Component, pageProps } = this.props;
    return (
      <Provider {...this.mobxStore}>
        <Container>
          <Component {...pageProps} />
        </Container>
      </Provider>
    );
  }
}

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

@inject("notesStore")
@observer
class SampleComponent extends Component {
  static async getInitialProps({ mobxStore, query }) {
    await mobxStore.notesStore.fetch();
    return { notesStore: mobxStore.notesStore };
  }

  render() {
    const { notesStore }: any = this.props;
    debugger;

    return (
      <div>
        <h1>{notesStore.test}</h1>
      </div>
    );
  }
}

export default SampleComponent;

从“React”导入React；
从“下一个/App”导入App，{Container}；
从“mobx react”导入{Provider}；
从“./mobx/stores”导入初始化存储；
类CustomApp扩展应用程序{
mobxStore：任何；
静态异步getInitialProps（appContext）{
const mobxStore=initializeStore（）；
appContext.ctx.mobxStore=mobxStore；
const-appProps=await-App.getInitialProps（appContext）；
返回{
…appProps，
initialMobxState:mobxStore，
};
}
建造师（道具）{
超级（道具）；
const isServer=typeof window==“未定义”；
this.mobxStore=isServer
？props.initialMobxState
：initializeStore（props.initialMobxState）；
}
render（）{
const{Component，pageProps}=this.props；
返回(
);
}
}

页面/索引.tsx

import React from "react";
import App, { Container } from "next/app";
import { Provider } from "mobx-react";

import initializeStore from "../mobx/stores";

class CustomApp extends App {
  mobxStore: any;
  static async getInitialProps(appContext) {
    const mobxStore = initializeStore();
    appContext.ctx.mobxStore = mobxStore;
    const appProps = await App.getInitialProps(appContext);
    return {
      ...appProps,
      initialMobxState: mobxStore,
    };
  }

  constructor(props) {
    super(props);
    const isServer = typeof window === "undefined";
    this.mobxStore = isServer
      ? props.initialMobxState
      : initializeStore(props.initialMobxState);
  }

  render() {
    const { Component, pageProps } = this.props;
    return (
      <Provider {...this.mobxStore}>
        <Container>
          <Component {...pageProps} />
        </Container>
      </Provider>
    );
  }
}

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

@inject("notesStore")
@observer
class SampleComponent extends Component {
  static async getInitialProps({ mobxStore, query }) {
    await mobxStore.notesStore.fetch();
    return { notesStore: mobxStore.notesStore };
  }

  render() {
    const { notesStore }: any = this.props;
    debugger;

    return (
      <div>
        <h1>{notesStore.test}</h1>
      </div>
    );
  }
}

export default SampleComponent;

import React，{Component}来自“React”；
从“mobx react”导入{inject，observer}；
@注入（“notesStore”）
@观察者
类SampleComponent扩展组件{
静态异步getInitialProps（{mobxStore，query}）{
等待mobxStore.notesStore.fetch（）；
返回{notesStore:mobxStore.notesStore}；
}
render（）{
const{notesStore}:any=this.props；
调试器；
返回(
{notesStore.test}
);
}
}
导出默认采样组件；

我的解决方案是重构代码并使用 下一个mobx包装器

这是我使用mobx和nextjs并享受两者功能的唯一方法。