观察者 mobx-react 似乎在 React 中不起作用

Question

我是 React 和 mobx 的初学者。根据我的设计，点击按钮后应该使用观察者、可观察模块更新数据。即使控制台日志显示每次单击按钮时更改的电子邮件，视图也不会更改。你能给我什么建议吗？

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;

Answer 1

您还需要使用@observable 装饰Index.data 属性。

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

// Or non-decorator syntax:

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