当我设置可观察者时,mobx反应观察者不会触发 [英] mobx-react observer don't fires when I set observable
问题描述
我正在尝试使用mobx和打字稿创建一个React应用程序.但这不起作用.
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>
}
}
推荐答案
您是否正在使用MobX 6?
Are you using MobX 6?
装饰器API与MobX 5相比有一些变化,现在您需要在构造函数中使用 makeObservable
方法来实现与以前相同的功能:
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;
};
}
尽管有新事物可能会允许您完全删除装饰器, makeAutoObservable
:
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;
};
}
此处的更多信息: https://mobx.js.org/react-integration.html
这篇关于当我设置可观察者时,mobx反应观察者不会触发的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!