问题描述
我的应用程序停止更新可观察到的变化,我快疯了,试图找出原因。下面的代码在屏幕上只显示“计数器:5”,即使控制台显示它正在更新。 package.json 的相关部分是:
{
"scripts": {
"start": "react-scripts start","build": "react-scripts build",},"dependencies": {
"mobx": "^6.0.4","mobx-react": "^7.0.5","react": "17.0.0","react-dom": "17.0.0","react-icons": "^4.1.0","react-router-dom": "^5.2.0","typescript": "^4.0.3","devDependencies": {
"babel-preset-mobx": "^2.0.0","react-app-rewire-yaml": "^1.1.0","react-scripts": "^4.0.1"
}
}
import React from "react";
import ReactDOM from "react-dom";
import "./index.css"
import { inject,observer,Provider } from "mobx-react";
import { observable } from "mobx";
class TestModel
{
@observable counter = 5;
start() {
setInterval(() => {this.counter++; console.log(this.counter)},1000);
}
}
@inject("testModel")
@observer
class TestPage extends React.Component<{testModel?: TestModel}>
{
render() {
return <div><h1>Counter: {this.props.testModel.counter}</h1></div>
}
}
const theTestModel = new TestModel();
theTestModel.start();
ReactDOM.render(
<Provider testModel={theTestModel}>
<TestPage />
</Provider>,document.getElementById("root")
);
编辑:
原来我需要在我的 TestModel 的构造函数中调用 makeObservable(this),而且我不得不将副作用提取到这样的动作上下文中:
@action incrementCounter = () => {
this.counter++;
console.log(this.counter)
}
start() {
setInterval(this.incrementCounter,1000);
}
解决方法
Since mobx@6.0.0
decorators are not enough。您还必须使用 makeObservable
手动使您的班级可观察。
import { observable,makeObservable } from "mobx";
class TestModel {
@observable counter = 5;
constructor() {
makeObservable(this);
}
start() {
setInterval(() => {this.counter++; console.log(this.counter)},1000);
}
}