Not working in nextjs using mobx:6.0.1

darwin-morocho commented 4 years ago

I'm using Nextjs to create a sample page, and mobx:6.0.1 with mobx-react:7.0.0

I have the next controller

export default class HomeController {
  private usersRepository = Get.find<UsersRepository>("users");

  @observable fetching = false;
  @observable users: User[] = [];

  constructor() {
    this.load();
  }

  @action
  async load(): Promise<void> {
    this.fetching = true;
    const users = await this.usersRepository.getUsers();
    this.users = [...users];
    this.fetching = false;
  }
}

And my HomePage

/* eslint-disable @typescript-eslint/explicit-module-boundary-types */
/* eslint-disable react/react-in-jsx-scope */
import Head from "next/head";
import React from "react";
import { List, Avatar } from "antd";
import { observer } from "mobx-react";
import styles from "../../styles/Home.module.css";
import HomeController from "../modules/index/controller";

@observer
export default class HomePage extends React.PureComponent {
  controller = new HomeController();

  render() {
    console.log("👏🏻");
    const { users } = this.controller;
    return (
      <div className={styles.container}>
        <Head>
          <title>Create Next App</title>
          <link rel="icon" href="/favicon.ico" />
        </Head>

        <main className={styles.main}>
          <h1 className={styles.title}>
            Welcome to <a href="https://nextjs.org">Next.js!</a>
          </h1>

          <List
            dataSource={users}
            renderItem={(item) => (
              <List.Item>
                <List.Item.Meta
                  avatar={<Avatar src={item.avatar} />}
                  title={
                    <a href="https://ant.design">
                      {item.first_name} {item.last_name}
                    </a>
                  }
                />
              </List.Item>
            )}
          />
        </main>

        <footer className={styles.footer}>
          <a href="https://meedu.app" target="_blank" rel="noopener noreferrer">
            Powered by meedu.app
          </a>
        </footer>
      </div>
    );
  }
}

when the users has been changed in my controller the HomePage should be updated. But it doesn't.

Next I used

    "mobx": "^5.15.7",
    "mobx-react": "^6.1.4",

And HomePage works fine

mweststrate commented 4 years ago

See migration guide, you will need to call makeObservable(this) in your constructor

Op wo 14 okt. 2020 01:49 schreef MEEDU.APP notifications@github.com:

I'm using Nextjs to create a sample page, and mobx:6.0.1 with mobx-react:7.0.0

I have the next controller

export default class HomeController {

private usersRepository = Get.find("users");

@observable fetching = false;

@observable users: User[] = [];

constructor() {
this.load();
}

@action

async load(): Promise {
this.fetching = true;

const users = await this.usersRepository.getUsers();

this.users = [...users];

this.fetching = false;
}

}

And my HomePage

/ eslint-disable @typescript-eslint/explicit-module-boundary-types / / eslint-disable react/react-in-jsx-scope / import Head from "next/head"; import React from "react"; import { List, Avatar } from "antd"; import { observer } from "mobx-react"; import styles from "../../styles/Home.module.css"; import HomeController from "../modules/index/controller";

@observer export default class HomePage extends React.PureComponent {

controller = new HomeController();

render() {
console.log("👏🏻");

const { users } = this.controller;

return (

  <div className={styles.container}>

    <Head>

      <title>Create Next App</title>

      <link rel="icon" href="/favicon.ico" />

    </Head>

    <main className={styles.main}>

      <h1 className={styles.title}>

        Welcome to <a href="https://nextjs.org">Next.js!</a>

      </h1>

      <List

        dataSource={users}

        renderItem={(item) => (

          <List.Item>

            <List.Item.Meta

              avatar={<Avatar src={item.avatar} />}

              title={

                <a href="https://ant.design">

                  {item.first_name} {item.last_name}

                </a>

              }

            />

          </List.Item>

        )}

      />

    </main>

    <footer className={styles.footer}>

      <a href="https://meedu.app" target="_blank" rel="noopener noreferrer">

        Powered by meedu.app

      </a>

    </footer>

  </div>

);
}

}

when the users has been changed in my controller the HomePage should be updated. But it doesn't.

Next I used
"mobx": "^5.15.7",

"mobx-react": "^6.1.4",
And HomePage works fine

— You are receiving this because you are subscribed to this thread. Reply to this email directly, view it on GitHub https://github.com/mobxjs/mobx-react/issues/912, or unsubscribe https://github.com/notifications/unsubscribe-auth/AAN4NBGFOJJK2ILWCXCTVXTSKTYTBANCNFSM4SP5S63Q .

darwin-morocho commented 4 years ago

Great thanks

mobxjs / mobx-react

Not working in nextjs using mobx:6.0.1 #912