我的应用程序停止更新可观察到的变化,我快疯了,试图找出原因。下面的代码在屏幕上只显示“计数器: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);
}
答案 0 :(得分:2)
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);
}
}