Javascript 更改@observable property don'；在我的项目中使用mobx重新渲染观察器组件

在我的项目中，我对Mobx有一个问题。通过操作更改“我的存储”中的属性不触发重新排序组件。我用

@action

注释了

@observer

字段，用HoC

observer

注释了组件

我在StackBlizt上做了一个最小的设置来表示问题：

单击按钮后，令牌应更改

Index.tsx

函数应用程序（）{
返回(
你好，反应！
);
}
render（，document.getElementById（“根”））；

StoreContext.tsx

export const StoreContext=createContext（{}作为UserStore）；
导出类型StoreComponent=FC；
导出常量StoreProvider:StoreComponent=({
儿童
商店
})：ReactElement=>{
返回(
{儿童}
);
};

UserStore.ts

导出默认类UserStore{
@可观察
公共authToken:string=“null”；
@行动
changeAuth=（auth:string）=>{
this.authToken=auth；
};
}

TestComponent.tsx

函数TestComponent（）{
const{changeAuth，authToken}=useContext（StoreContext）；
常量handleClick=（）=>{
变更认证（“测试认证”）；
};
返回(
单击以更改存储中的令牌


令牌：{authToken}


);
}
导出默认观察者（TestComponent）；

---

我没有注意到什么？

如果您使用的是MobX 6，那么您现在需要在构造函数内部使用

makeObservable

方法来实现与MobX 5相同的装饰功能：

import { makeObservable } from "mobx"

export default class UserStore {
  @observable
  public authToken: string = "null";

  @action
  changeAuth = (auth: string) => {
    this.authToken = auth;
  };

  constructor() {
    // Just call it here
    makeObservable(this);
  }
}

尽管有新的东西可能允许您完全删除装饰程序，

makeAutoObservable

：

import { makeAutoObservable } from "mobx"

export default class UserStore {
  // Don't need decorators now
  public authToken: string = "null";

  // Don't need decorators now
  changeAuth = (auth: string) => {
    this.authToken = auth;
  };

  constructor() {
    // Just call it here
    makeAutoObservable(this);
  }
}

更多信息请点击这里 和

---

您使用的是MobX版本6吗？@Danila yes“MobX”：“^6.0.1”，“MobX react”：“^7.0.0”，