React Native, использующий асинхронное хранилище для установки и получения одного и того же значения при рендеринге

#javascript #react-native #asynchronous #dom

#javascript #реагировать-родной #асинхронный #dom

Вопрос:

Я хочу установить значение и получить его в рендеринге с помощью однострочного кода, добавив переменную между тегами. Это может привести к ошибке: (Не удается найти переменную: storage_key)

 import React, { Component } from 'react'
import { View, Text } from 'react-native';
import AsyncStorage from '@react-native-async-storage/async-storage';

class SyncRu extends Component {
    state = {
       'storage_Key': ''
   }
   render() {
       const storeData = async (value) => {
          try {
            await AsyncStorage.setItem('@storage_Key', value)
        } catch (e) {
            // saving error
        }
    }
    const getData = async () => {
        try {
            const value = await AsyncStorage.getItem('@storage_Key')
            if (value !== null) {
                // value previously stored
            }
        } catch (e) {
            // error reading value
        }
    }
    return (
        <View>
            <Text>
                {storage_Key}
            </Text>
        </View>
    )
}
}
export default SyncRu
 

Ответ №1:

Вы неправильно инициализировали состояние. Вместо того , чтобы:

 state = {
   'storage_Key': ''
}
 

Вы должны использовать:

 this.state = {storage_Key: ""};
 

После того, как вы получите доступ к своим данным из AsyncStorage, вы должны использовать setState для обновления вашего пользовательского интерфейса.

 const value = await AsyncStorage.getItem('@storage_Key')
if (value !== null) {
   this.setState({
      storage_Key: value
   });
}
 

Также взгляните на документацию о состоянии реакции.
Государственная документация React

Комментарии:

1. @HowardJohn Я отредактировал свой пост выше. Сработало ли это? Не забудьте закрыть проблему, приняв в качестве ответа, если это сработает 🙂