Состояние не обновляется через AsyncStorage при загрузке приложения

Question

Я пытаюсь создать приложение для напоминания о воде. У меня 3 экрана и я использую реагирующую навигацию

• Дом (что я позволяю пользователям увеличить количество выпитого в этот день и отобразить сколько воды они выпили )
• Уведомления (где пользователи определяют с помощью кнопок переключения, если они хотят получать уведомления и когда получать)
• Настройки (где пользователь вводит возраст, вес, чтобы определить, сколько они следует пить ежедневно). это первый экран, который пользователи видят, когда они скачал приложение

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

state = {
    progress: 0,
    drunk: 0,
    open: false,
    goal: 0,
};

componentDidMount() {
    this.willFocusSubscription = this.props.navigation.addListener('willFocus', payload => {
        // perform check when the component mounts
        this.checkDate();

        // retrieve data from AsyncStorage
        this._retrieveData();
    });
}

// function to retreive data from AsyncStorage
_retrieveData = async () => {
    try {
        const sliderValue = await AsyncStorage.getItem('sliderValue');
        const drunk = await AsyncStorage.getItem('drunk');
        const progress = await AsyncStorage.getItem('progress');

        if (sliderValue !== null) {
            // We have data!! ve stateleri belirledik
            this.setState({ goal: parseInt(sliderValue) });
        } else if (sliderValue === null) {
            this.setState({ goal: 0 });
        }

        if (drunk !== null) {
            this.setState({ drunk: parseInt(drunk) });
        } else if (drunk === null) {
            this.setState({ drunk: 0 });
        }

        if (progress !== null) {
            this.setState({ progress: parseFloat(progress) });
        } else if (progress === null) {
            this.setState({ progress: 0 });
        }

    } catch (error) {
        console.log(error.message);
    }
};

// function to check date and set drunk to zero
checkDate = async () => {
    // create a string with the current date
    let currentDateString = moment().format('DDMMYYYY');

    // get the value from storage
    let savedDateString = await AsyncStorage.getItem('storedDate');

    // create variables for differences on year month
    let yearDiff = currentDateString.slice(4) - savedDateString.slice(4)
    let monthDiff = currentDateString.slice(2, 4) - savedDateString.slice(2, 4)
    let dayDiff = currentDateString.slice(0, 2) - savedDateString.slice(0, 2)

    // if there is a value on AsyncStorage
    if (savedDateString) {
        // if difference is bigger than zero set drunk and progress to zero
        if (yearDiff > 0 || monthDiff > 0 || dayDiff > 0) {
            // this is where you put the code that resets everything
            // clear the values that you have previously saved
            // remember to save the new date
            this.setState({ drunk: 0, progress: 0 }, () => {
                this._storeData();
            });
            try {
                await AsyncStorage.setItem('storedDate', currentDateString);
            } catch (err) {
                console.debug(err.message);
            }
        }
    } else {
        // save the time as this is the first time the app has launched
        // do any other initial setup here
        try {
            await AsyncStorage.setItem('storedDate', currentDateString);
        } catch (err) {
            console.debug(err.message);
        }
    }
};

render() {
    return (
        <Provider>
            <View style={styles.container}>
                <Text style={styles.drunk}>
                    {this.state.drunk.toFixed(0)} / <Text style={styles.goal}>{this.state.goal}</Text>
                </Text>
            </View>
        </Provider>
 )
}

Answer 1

Проблема: я вызываю метод AsyncStorage внутри слушателя навигации. Поскольку AsyncStorage работает асинхронно, методы AsyncStorage не завершены в приемнике навигации.

Как я решил эту проблему, так это то, что я сделал асинхронную функцию componentDidMount и вызывал методы вне слушателя навигации с помощью await.

async componentDidMount() {
    // perform check when the component mounts
    await this.checkDate();

    // retrieve data from AsyncStorage
    await this._retrieveData();

    this.willFocusSubscription = this.props.navigation.addListener('willFocus', payload => {
        // perform check when the component mounts
        this.checkDate();

        // retrieve data from AsyncStorage
        this._retrieveData();
    });
}