Реактивное состояние MobX на react native

#react-native #mobx-react

#react-native #mobx-реагировать

Вопрос:

я работаю над разработкой функции для страницы достижений, где уровни, изображение и цель будут меняться в зависимости от текущего результата. Но, похоже, код не работает, когда страница смонтирована.

я использую 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 amp;amp; score.scoreCurrent < 1000) {
                return console.log('level 1');
            }else if(score.scoreCurrent >= 1001 amp;amp; score.scoreCurrent < 2000){
                return console.log('level 2');
                this.score.scoreLevel = 2;
                this.score.scoreTarget = 2000;
            }else if(score.scoreCurrent >= 2001 amp;amp; 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);
            }
        });
    }
}
  

моя идея заключается в том, что каждый раз, когда запускается это хранилище, логика получает текущую оценку из каждого блока оценки, тогда это поможет установить правильное изображение, заголовок и целевую оценку на основе текущей оценки. И вся логика будет сначала обработана в этом хранилище, прежде чем будет введена на страницу просмотра с правильными данными, для более чистой структуры кода.

но проблема сейчас в том, что логика даже не выдает консоль.вывод журнала.

Могу ли я узнать, как мне это исправить, чтобы оно работало? почему оно работает не так, как я хочу?

Спасибо! Terima kasih!