0

I am a starter to React and mobx. Based on my design, data should be updated after click the button using observer, observable modules. Even though the console log displays the email changed whenever clicking the button, the view doesn't change at all. Could you give me any advice? 

import Link from 'next/link';
import React, { useState } from 'react';
import ProfileImage from '../components/ProfileImage';
import faker from 'faker';
import { decorate, observable } from 'mobx';
import { observer } from "mobx-react"


class Data {
    avartar = faker.image.avatar();
    email = faker.internet.email();
    name = {
        firstName: faker.name.firstName(),
        lastName: faker.name.lastName(),
    };
}

decorate(Data, {
    avartar: observable,
    email: observable,
    name: observable,
})

class Index extends React.Component {
    data = new Data();

    generate = () => {
        this.data.email = faker.internet.email();
        this.data.name.firstName = faker.name.firstName();
        this.data.avartar = faker.image.avatar();
        console.log("check: ", this.data.email);
    }

    render() {
        return (
            <>
                <h1>Index</h1>
                <button className="btn btn-primary" onClick={this.generate}>Change</button>
                <div>
                    <dl className="row">
                        <dt className="col-sm-3">Avatar</dt>
                        <dd className="col-sm-9"><img src={this.data.avartar} /></dd>
                        <dt className="col-sm-3">Name</dt>
                        <dd className="col-sm-9">{this.data.name.firstName} {this.data.name.lastName}</dd>
                        <dt className="col-sm-3">Email</dt>
                        <dd className="col-sm-9">{this.data.email}</dd>
                    </dl>
                </div>
            </>);
    }
}

Index = observer(Index);
export default Index;
CalgaryFlames
  • 678
  • 2
  • 10
  • 30

1 Answers1

-1

You need to also decorate the Index.data property with @observable.

@observer
class Index extends React.Component {
    @observable data = new Data();
}

// Or non-decorator syntax:

Index = observer(decorate(Index, { data: observable }));
hackape
  • 18,643
  • 2
  • 29
  • 57
  • Thank you for your comment. When tried to use decorator, another error occurred ' Support for the experimental syntax 'decorators-legacy' isn't currently enabled (25:1):' I referred to here(https://stackoverflow.com/questions/52262084/syntax-error-support-for-the-experimental-syntax-decorators-legacy-isnt-cur), so I used later one. I tried to use this 'Index = observer(decorate(Index, { data: observable }));' but it's same. – CalgaryFlames Apr 13 '20 at 03:57
  • Where does that 'decorators-legacy' error come from? Babel? – hackape Apr 13 '20 at 04:00
  • babel is included in nextjs. see: https://nextjs.org/docs/advanced-features/customizing-babel-config – hackape Apr 13 '20 at 04:11
  • You're right! I will search for Babel setting to use the decorator. Then let you know the result. – CalgaryFlames Apr 13 '20 at 04:18