Наблюдатель Mobx-реагирует, кажется, не работает в React - PullRequest
Новая
       13

Наблюдатель Mobx-реагирует, кажется, не работает в React

0 голосов
/ 13 апреля 2020

Я начинающий реагировать и мобкс. Исходя из моего дизайна, данные должны обновляться после нажатия на кнопку с помощью наблюдателя, наблюдаемых модулей. Несмотря на то, что в журнале консоли отображается электронное сообщение, измененное при нажатии кнопки, представление не изменяется вообще. Не могли бы вы дать мне совет? 

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;

1 Ответ

0 голосов
/ 13 апреля 2020

Вам также необходимо украсить свойство Index.data с помощью @observable. 

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

// Or non-decorator syntax:

Index = observer(decorate(Index, { data: observable }));
...