当我设置 observable 时，mobx-react 观察者不会触发 [英] mobx-react observer don't fires when I set observable

问题描述

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

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

从反应"导入反应；从mobx"导入 { observable, action };从mobx-react"导入{观察者，注入，提供者}；导出类 TestStore {@observable 定时器 = 0;@action timerInc = () =>{this.timer += 1;};}接口 IPropsTestComp {测试存储?:测试存储；}@inject("TestStore")@观察者导出类 TestComp 扩展了 React.Component{构造函数(道具:IPropsTestComp){超级(道具)；setInterval(() => {this.props.TestStore!.timerInc();}, 1000);}使成为() {return 
{this.props.TestStore!.timer}
;}}导出类 TestApp 扩展了 React.Component {使成为() {return <TestComp/></提供者>}}

解决方案

你在使用 MobX 6 吗?

Decorator API 从 MobX 5 改变了一点，现在你需要在构造函数中使用 makeObservable 方法来实现和以前一样的功能:

import { observable, action, makeObservable } from "mobx";导出类 TestStore {@observable 定时器 = 0;构造函数(){makeObservable(this);}@action timerInc = () =>{this.timer += 1;};}

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

import { makeAutoObservable } from "mobx";导出类 TestStore {定时器 = 0;构造函数(){//现在不需要装饰器，只需要这个调用makeAutoObservable(this);}timerInc = () =>{this.timer += 1;};}

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

I am trying to create a react application using mobx and typescript. But it doesn't work.

I expect the timer to count the seconds. And I see that the event happens and updates the counter. But the component is not rerender. What am I doing wrong?

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>
    }
}

解决方案

Are you using MobX 6?

Decorator API changed a little bit from MobX 5, now you need to use makeObservable method inside constructor to achieve same functionality as before:

import { observable, action, makeObservable } from "mobx";

export class TestStore {
    @observable timer = 0;

    constructor() {
      makeObservable(this);
    }

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

Although there is new thing that will probably allow you to drop decorators altogether, 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;
    };
}

More info here: https://mobx.js.org/react-integration.html

这篇关于当我设置 observable 时，mobx-react 观察者不会触发的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！