React Native – невозможно получить данные из AsyncStorage.getItem()

Я использую AsyncStorage для установки элемента и получения его с помощью метода getItem(). Мой код выглядит следующим образом:

import React, { Component } from 'react';
import { View } from 'react-native';
import { Container, Left, Title, Header, Body, Right, Content, Text, Button } from 'native-base';
import AsyncStorage from '@react-native-community/async-storage';

class Counter extends Component {


  componentDidMount() {
    AsyncStorage.setItem('name' , 'abc');
  }

  getItemData() {
    console.info(AsyncStorage.getItem('name'))
  }



  render() {
    return (
      <Container>

        <Header>
          <Left />
          <Body>
            <Title>Test</Title>
          </Body>
          <Right />
        </Header>

        <Content style = {{ margin: 8 }}>

          <View style = {{ flexDirection: "row", alignSelf: "center" }}>

            <Button onPress = {() => this.getItemData()}><Text> getItem </Text></Button>

          </View>

        </Content>

      </Container>
    );
  }

}

export default Counter;

Но вместо того, чтобы получить «abc» в моей консоли, я получаю это:

{"_U": 0, "_V": 0, "_W": null, "_X": null}

Как получить «abc» в моей консоли?

Вы читали документы? react-native-async-storage.github.io/async-storage/docs/usag‌e

— 14.12.2020 10:45

javascript reactjs react-native

14.12.2020 10:39

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

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

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Безумие обратных вызовов в javascript [JS]

Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

JavaScript Вопросы с множественным выбором и ответы

Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...

1 038

Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

Ответ принят как подходящий

Добавьте async и await:

    async getItemData() {
       const result = await AsyncStorage.getItem('name');
       console.info(result);
     }

    async componentDidMount() {
       await  AsyncStorage.setItem('name' , 'abc');
     }

14.12.2020 10:46

getItem возвращает обещание, которое либо разрешается в сохраненное значение, когда данные найдены для данного ключа, либо возвращает null в противном случае.

Чтение строкового значения:

 async getAsyncData() {
      await AsyncStorage.getItem('name').then(val => {
        if (val !== null) {
          console.info(value);
        }
      })
    }

Чтение значения объекта:

 async getAsyncData() {
      await AsyncStorage.getItem('name').then(val => {
        if (val !== null) {
          console.info(JSON.parse(val));
        }
      })
    }

14.12.2020 11:30

Другие вопросы по теме

Лучший способ отправки запроса дочернему компоненту

Файл не существует, но я все еще получаю сообщение об ошибке

React JS обрабатывает событие onchange, чтобы передать его по URL-адресу выборки

Реагировать — чтобы исправить, отмените все подписки и асинхронные задачи в функции очистки useEffect

Листовка React - TileLayer не отображается при первой загрузке

Как применить стили к нескольким компонентам, используя стилизованные компоненты

Как повторно отобразить родительский компонент из дочернего компонента

Расширения файлов React typescript .tsx

Можно ли определить функцию внутри компонента без сохранения состояния React?

Проблема с конфигурацией Nginx с https в Windows

React Native – невозможно получить данные из AsyncStorage.getItem()

Ответы 2

Другие вопросы по теме

Похожие вопросы