Not working in nextjs using mobx:6.0.1
darwin-morocho opened this issue · comments
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
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<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
—
You are receiving this because you are subscribed to this thread.
Reply to this email directly, view it on GitHub
<#912>, or unsubscribe
<https://github.com/notifications/unsubscribe-auth/AAN4NBGFOJJK2ILWCXCTVXTSKTYTBANCNFSM4SP5S63Q>
.
Great thanks