IT技术 - 当我设置 observable 时，mobx-react 观察者不会触发 - 吾爱随笔录

我正在尝试使用 mobx 和 typescript 创建一个react应用程序。但它不起作用。

我希望计时器可以计算秒数。我看到事件发生并更新了计数器。但该组件不会重新渲染。我究竟做错了什么？

import React from "react";
import { observable, action } from "mobx";
import { observer, inject, Provider } from "mobx-react";

export class TestStore {
    @observable timer = 0;

    @action timerInc = () => {
        this.timer += 1;
    };
}

interface IPropsTestComp {
    TestStore?: TestStore;
}

@inject("TestStore")
@observer
export class TestComp extends React.Component<IPropsTestComp> {
    constructor(props: IPropsTestComp) {
        super(props);
        setInterval(() => {
            this.props.TestStore!.timerInc();
        }, 1000);
    }

    render() {
        return <div>{this.props.TestStore!.timer}</div>;
    }
}

export class TestApp extends React.Component {
    render() {
        return <Provider TestStore={new TestStore()}>
            <TestComp />
        </Provider>
    }
}

import { observable, action, makeObservable } from "mobx"; export class TestStore { @observable timer = 0; constructor() { makeObservable(this); } @action timerInc = () => { this.timer += 1; }; }

import { makeAutoObservable } from "mobx"; export class TestStore { timer = 0; constructor() { // Don't need decorators now, just this call makeAutoObservable(this); } timerInc = () => { this.timer += 1; }; }