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

问题描述

使用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

我试图测试来自在testStore.ts上声明的名为“ test”的@computing函数的响应。

我希望在'Pages / index.tsx'内接收到值'3'作为在testStore.ts上声明的@observable testArray的长度。 相反，我没有任何价值。

知道为什么会这样吗？

我的代码：

testStore.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;

stores.ts

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;
}

页面/_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>
    );
  }
}

pages / index.tsx

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;

解决方法

我的解决方案是重构代码并使用 next-mobx包装器 https://github.com/nghiepit/next-mobx-wrapper

那是我可以使用mobx和nextjs并享受二者功能的唯一方法。