Mobx 不会重新渲染 React 组件

Question

我正在尝试遵循文档中的这个 guide。这是我的组件：

页脚

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是observable，onClick是action，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（您应该这样做），则需要明确启用装饰器。由于您在 tsconfig.json 中使用 TypeScript，因此您需要启用这些编译器选项：

experimentalDecorators : true

和

useDefineForClassFields : true

更多信息在 docs

Mobx 不会重新渲染 React 组件

Mobx doesn't re-render React component

javascript

reactjs

mobx

mobx-react