反应本机上的MobX反应状态

Question

我正在开发一项成就页面的功能，该页面的级别，图像和目标将根据当前分数而变化。但是在页面挂载后，该代码似乎不起作用。

我使用MobX进行状态管理存储，我的代码如下：

import { observable, computed, action } from 'mobx';
import { AsyncStorage } from 'react-native';

export default class Trophy {

    @observable ScoreBoard = [
     {
        scoreID: 0,
        scoreTitle: 'Trophy 0',
        scoreIcons: require('../../assets/images/robot-dev.png'),
        scoreCurrent: 1010,
        scoreTarget: 1000,
        scoreLevel: 1
    }, {
        scoreID: 1,
        scoreTitle: 'Trophy 1',
        scoreIcons: require('../../assets/images/robot-dev.png'),
        scoreCurrent: 0,
        scoreTarget: 1000,
        scoreLevel: 1
    }, {
        scoreID: 2,
        scoreTitle: 'Trophy 2',
        scoreIcons: require('../../assets/images/robot-dev.png'),
        scoreCurrent: 0,
        scoreTarget: 1000,
        scoreLevel: 1
    }, {
        scoreID: 3,
        scoreTitle: 'Trophy 3',
        scoreIcons: require('../../assets/images/robot-dev.png'),
        scoreCurrent: 0,
        scoreTarget: 1000,
        scoreLevel: 1
    }, {
        scoreID: 4,
        scoreTitle: 'Trophy 4',
        scoreIcons: require('../../assets/images/robot-dev.png'),
        scoreCurrent: 0,
        scoreTarget: 1000,
        scoreLevel: 1
    }, {
        scoreID: 5,
        scoreTitle: 'Trophy 5',
        scoreIcons: require('../../assets/images/robot-dev.png'),
        scoreCurrent: 0,
        scoreTarget: 1000,
        scoreLevel: 1
    }
]

@computed get updateScore() {
    // Dive into each score block
    this.ScoreBoard.forEach((score) => {
        if(score.scoreID === 1) {
            if(score.scoreCurrent >= 0 && score.scoreCurrent < 1000) {
                return console.log('level 1');
            }else if(score.scoreCurrent >= 1001 && score.scoreCurrent < 2000){
                return console.log('level 2');
                this.score.scoreLevel = 2;
                this.score.scoreTarget = 2000;
            }else if(score.scoreCurrent >= 2001 && score.scoreCurrent < 3000) {
                return console.log('level 3');
            }else if(score.scoreCurrent <= 3001) {
                return console.log('level 4');
            }
        }else if(score.scoreID === 2) {
            return console.log(score.scoreTitle);
        }else if(score.scoreID === 3) {
            return console.log(score.scoreTitle);
        }else if(score.scoreID === 4) {
                return console.log(score.scoreTitle);
           }else if(score.scoreID === 5) {
                return console.log(score.scoreTitle);
            }else {
                return console.log(score.scoreTitle);
            }
        });
    }
}

我的想法是，每次商店运行时，逻辑都会从每个得分块中获取当前得分，然后这将有助于根据当前得分设置正确的图像，标题和目标得分。并且所有逻辑将首先在此存储中处理，然后再使用正确的数据注入到视图页面中，以实现更清晰的代码结构。

但是现在的问题是，逻辑甚至没有提供console.log输出。

我可以知道如何解决此问题以使其运行吗？为什么它不像我想要的那样运行？

谢谢！特里玛·卡西