当 MobX 对象更新时，React 组件不会更新

编程问答 2022-05-29

问题描述

我刚开始使用 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());

然后据我所知，它应该可以工作。

mobxmobxmobxmobxmobx-reactreactjsreactjsreactjsreactjs