观察者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

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