re--装饰器+ useObserver不重新渲染
我不能用MobX重新渲染。我正在根据文件设置所有的东西。我的类包含action和observable装饰器。我试着用useObserver hook或observer HOC连接React组件，它简单地说不会重新呈现。
片段：
import React from "react";
import ReactDOM from "react-dom";
import { action, observable } from "mobx";
import { observer, useObserver } from "mobx-react-lite";
class Timer {
@observable secondsPassed: number = 0;
@action increaseTimer() {
console.log("here");
this.secondsPassed += 1;
}
}
const myTimer = new Timer();
setInterval(() => {
myTimer.increaseTimer();
}, 1000);
const TimerView = ({ timer }: { timer: Timer }) => {
return useObserver(() => <div>{timer.secondsPassed}</div>);
};
ReactDOM.render(<TimerView timer={myTimer} />, document.body);https://codesandbox.io/s/minimal-observer-forked-gif4q?file=/src/index.tsx
我想和装饰师合作，我做错什么了？
回答 2
Stack Overflow用户
发布于 2020-11-15 22:09:28
经过4个小时的研究。我的团队的项目是使用MobX版本4.x，代码库使用装饰器作为上面的示例。
但
版本6之前的MobX鼓励使用ES.next装饰器将事物标记为可观察的、计算的和操作的。然而，装饰师目前还不是一个ES标准，标准化过程需要很长时间。该标准看起来也将不同于以前实现装饰师的方式。为了兼容性起见，我们选择了在MobX 6中不再使用它们，而是建议使用makeObservable / makeAutoObservable。
这意味着，MobX现在需要使用makeObservable(This)将类声明为在构造函数中可观察到的：
import { makeObservable } from "mobx";
class Timer {
@observable secondsPassed: number = 0;
@action increaseTimer() {
this.secondsPassed += 1;
}
// THIS IS IMPORTANT FROM MOBX 6.X ONWARDS
constructor() {
makeObservable(this);
}
}从医生那里：
版本6之前的MobX不需要构造函数中的makeObservable(this)调用，但是由于它使装饰器的实现更简单和更兼容，所以现在需要了。这指示MobX使实例能够在装饰器中的信息之后被观察到--装饰器代替了makeObservable的第二个参数。
进一步阅读MobX
Stack Overflow用户
发布于 2020-11-13 07:10:59
您需要将您的应用程序与供应商包装，并将商店作为支柱通过。
import { Provider } from 'mobx-react';
ReactDOM.render(
<Provider {myTimer}> <TimerView timer={myTimer} /> </Provider>,
document.body
);https://stackoverflow.com/questions/64822953
复制
相似问题
装饰渲染器
ContentControl旋转装饰器渲染
mobx UseObserver不在存储更新时重新呈现。
装饰再渲染
项目渲染器未设置装饰器
领取专属 10元无门槛券
AI混元助手 在线答疑
洞察 腾讯核心技术
剖析业界实践案例
腾讯云开发者
