提供了编程的基础技术教程

zl程序教程

您现在的位置是：首页 >  Java

当前栏目

mobx 6 关于computed 不更新的bug

2023-02-18 16:29:04 时间

bug收集：专门解决与收集bug的网站

网址：www.bugshouji.com

今日分享： 使用mobx时，遇到的关于computed不更新

项目代码：

 constructor(){
        makeAutoObservable(this)
 }
 get user(){ 
       if(sessionStorage.getItem("user")){
           return JSON.parse(sessionStorage.getItem("user"));
       }
        return {};
}
set user(data){
        sessionStorage.setItem("user",JSON.stringify(data));
}

问题描述：

登录成功后，修改user的值，组件不能得到新的值 ，要刷新后才能获取值 

login=(userInput)=>{
        // 只进行数据处理，不进行界面的提示信息
        return new Promise((resolve,reject)=>{
            // 1. 发起axios请求
            service.userSerive.User_Login(userInput).then((data)=>{
                this.user=data.data;
                resolve(data);
            }).catch((err)=>{
                reject(err);
            })
        });
    }

相关文档：

计算值可以有 setters 你也可以为计算值定义一个 setter。需要注意的是，这些 setters 不能直接更改计算属性的值， 但是它们可以被当作派生的“逆操作”使用。setters 会被自动标记为 actions。 https://zh.mobx.js.org/computeds.html#computed-struct

例如： 

class Dimension {
    length = 2

    constructor() {
        makeAutoObservable(this)
    }

    get squared() {
        return this.length * this.length
    }
    set squared(value) {
        this.length = Math.sqrt(value)
    }
}

问题分析：

setters 会被标记为action , 调用了action是不会重新渲染，而要让重新渲染，还是要依赖 observable 变量发生改变。

而我项目中的代码中，直接操作的sessionStorage，而不是修改observable变量，故不会刷新

解决方案：

使用observable 变量，代码如下： 

_user = sessionStorage.getItem("user")?JSON.parse(sessionStorage.getItem("user")):{};

 get user(){ 
       return this._user;
   }
 set user(data){
      this._user = data;
      sessionStorage.setItem("user",JSON.stringify(data));
 }

苟有恒 , 何必三更眠五更起

相关文章