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是可观察的，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组件

2 个答案: