Mobx不重新呈现React组件。

Question

我试图从文档中跟踪这个指南。以下是我的组件：

页脚

import { observer } from 'mobx-react-lite';
import React from 'react';
import FooterViewModel from './footerViewModel';

const viewModel = new FooterViewModel();

const Footer = observer(() => {
    return (
        <footer>
            {viewModel.content}
            <button onClick={viewModel.onClick}>Button</button>
        </footer>
    );
});

export default Footer;

FooterViewModel

import { action, observable } from 'mobx';

export default class FooterViewModel {
    @observable
    public content = 'asdasdasd';

    @action
    public onClick = (): void => {
        this.content = '234';
        console.log(this.content);
    };
}

字段content是可观察的，onClick是动作的，Footer是observer的，它们应该是。但单击按钮并不会调用组件的重新呈现。因此，content字段正在发生变化。

我做错了什么？

Answer 1

根据文档，您需要调用makeAutoObservable

import { action , makeAutoObservable} from 'mobx';

和

constructor() {
    makeAutoObservable(this)
}

https://stackblitz.com/edit/mobx-5pjrm9?file=index.js

与可观察的装潢师：

https://stackblitz.com/edit/mobx-react-lite-jrzgzf?file=index.js

Answer 2

如果您正在使用v6 (而且您应该使用)，您需要显式地启用装饰器。由于在TypeScript中使用的是tsconfig.json，所以需要启用以下编译器选项：

experimentalDecorators : true

和

useDefineForClassFields : true

文档中的更多信息