观察者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 }));