如何解决当 MobX 对象更新时,React 组件不会更新
我刚开始使用 MobX,所以如果我在这里遗漏了一些非常微不足道的东西,请原谅我。为了弄湿我的脚,我刚刚构建了一个简单的加减项目,它利用了上下文。我制作了 AddButton、SubtractButton 和 Answer 三个组件。所有读取和更新使用 observable 的类的实例。
代码沙盒:https://codesandbox.io/s/stoic-chandrasekhar-kz5e9?file=/src/App.tsx
目的是在 AnswerStore 更改时更新 Answer 组件。 (答案包裹在observer HOC中)
这家店的样子
export class AnswerStore {
@observable
answer = 0;
@action
add() {
console.log("Adding 1 to ",this.answer);
this.answer = this.answer + 1;
}
@action
sub() {
console.log("Subtracting 1 from ",this.answer);
this.answer = this.answer - 1;
}
}
const context = React.createContext({} as AnswerStore);
export const useStore = () => React.useContext(context);
Answer 组件看起来像这样
import { observer } from "mobx-react-lite";
import React from "react";
import { useStore } from "./store";
const answer = observer(() => {
const store = useStore()
return <h1>Answer is: {store.answer}</h1>;
})
export default answer
我再次不确定我在这里缺少什么:/
解决方法
const context = React.createContext({} as AnswerStore);
“as”语句是 Typescript,它说明 {}
应该被视为什么类型。
它只存在于 Typescript 中,因为 Typescript 类型在编译后生成的 Javascript 中不存在。所以上下文是用一个普通的空对象初始化的,而不是一个可观察的对象。
如果你这样做
const context = React.createContext(new AnswerStore());
然后据我所知,它应该可以工作。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。