当我设置 observable 时，mobx-react 观察者不会触发

Posted 2023-03-13

【中文标题】当我设置 observable 时，mobx-react 观察者不会触发

【英文标题】：mobx-react observer don't fires when I set observable

【发布时间】：2021-01-29 07:39:27

【问题描述】：

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

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

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>
    

【参考方案1】：

你在使用 MobX 6 吗？

Decorator API 从 MobX 5 做了一点改动，现在你需要在构造函数中使用 makeObservable 方法来实现与之前相同的功能：

import  observable, action, makeObservable  from "mobx";

export class TestStore 
    @observable timer = 0;

    constructor() 
      makeObservable(this);
    

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

虽然有一些新东西可能会让你完全放弃装饰器，makeAutoObservable:

import  makeAutoObservable  from "mobx";

export class TestStore 
    timer = 0;

    constructor() 
      // Don't need decorators now, just this call
      makeAutoObservable(this);
    

    timerInc = () => 
        this.timer += 1;
    ;

更多信息在这里：https://mobx.js.org/react-integration.html