Извлеките данные из собственного асинхронного хранилища реакции и отобразите их

У меня есть эти вопросы:

_storeData = async () => {
  try {
    await AsyncStorage.setItem("@MySuperStore:key", "I like to save it.");
  } catch (error) {
    // Error saving data
  }
};

Нужно ли вызывать _storeData(); сохранить данные?

Я не знаю, сохранены ли у меня данные или нет из-за следующей проблемы.

Я использую этот код для извлечения данных из асинхронного хранилища:

_retrieveData = async () => {
  try {
    const value = await AsyncStorage.getItem("@MySuperStore:key");
    if (value !== null) {
      // We have data!!
      return value;
    }
  } catch (error) {}
};

Как я должен отображать данные? Я использую _retriveData() в элементе React-Native Text, и система показывает мне это сообщение:

Render error - objects are not valid as a react child (found: object with keys _x, _y, _z, _A. 
If you ment to render a collection of children, use an array instead.

Можете ли вы поделиться своим полным компонентом? Куда вы звонили _storeData и _retrieveData?

Yakup Malikov 22.01.2023 14:13

Покажите, где вы визуализируете значение, полученное из асинхронного хранилища. Вы пытаетесь отобразить объект javascript {}, но это должен быть массив []

Michael Bahl 22.01.2023 14:14
snack.expo.dev/@jurajbe/appasyncstorage вот код
JurajB 22.01.2023 16:38
Умерло ли Create-React-App?
Умерло ли Create-React-App?
В этом документальном фильме React.dev мы исследуем, мертв ли Create React App (CRA) и какое будущее ждет этот популярный фреймворк React.
Освоение React Native: Пошаговое руководство для начинающих
Освоение React Native: Пошаговое руководство для начинающих
React Native - это популярный фреймворк с открытым исходным кодом, используемый для разработки мобильных приложений. Он был разработан компанией...
В чем разница между react native и react ?
В чем разница между react native и react ?
React и React Native - два популярных фреймворка для создания пользовательских интерфейсов, но они предназначены для разных платформ. React - это...
От React к React Native: Руководство для начинающих по разработке мобильных приложений с использованием React
От React к React Native: Руководство для начинающих по разработке мобильных приложений с использованием React
Если вы уже умеете работать с React, создание мобильных приложений для iOS и Android - это новое приключение, в котором вы сможете применить свои...
Хуки React: что это такое и как их использовать
Хуки React: что это такое и как их использовать
Хуки React - это мощная функция библиотеки React, которая позволяет разработчикам использовать состояние и другие возможности React без написания...
1
3
87
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

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

Do I need to call _storeData(); to save the data? да (или вы можете напрямую вызвать AsyncStorage.setItem(), но для этого и предназначена эта функция).

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

_retrieveData = async () => {
  try {
    const value = await 
AsyncStorage.getItem("@MySuperStore:key");
    if (value !== null) {
      console.info("We have data!!", value)
      return value;
    }
  } catch (error) {}
};

Я считаю, что ошибка рендеринга, которую вы получаете, обычно возникает из-за попытки рендеринга объекта, где он должен быть массивом, как говорит @Michael Bahl, или строкой, вам, вероятно, нужно деструктурировать данные с помощью {}.

ОБНОВЛЯТЬ: Я немного поиграл с этим, и было несколько вещей, которые нужно было исправить. Самое главное, вы не должны просто вызывать функцию и отображать ее возвращаемое значение в React Native. Вы должны использовать useState для управления им. И например используйтеEffect для его обновления. Поиграв, я заставил его работать, как я думаю, вы и ожидали, вот код, дайте мне знать, если у вас есть какие-либо вопросы по этому поводу:

import React, { useState, useEffect } from 'react';
import { Text, View, StyleSheet } from 'react-native';
import Constants from 'expo-constants';
import AppLoading from "expo-app-loading";
// You can import from local files
import AssetExample from './components/AssetExample';

// or any pure javascript modules available in npm
import { Card } from 'react-native-paper';

import AsyncStorage from '@react-native-async-storage/async-storage';
_storeData = async () => {
  try {
    await AsyncStorage.setItem("@MySuperStore:key", "I like to save it.");
    console.info('data saved')
  } catch (error) {
    console.info('error1', error)

  }
};

_storeData();

const image = { uri: "https://jurajbevilaqua.com/bg.png" };

export default function App() {
  const [IsReady, SetIsReady] = useState(false);
  const [savedData, setSavedData] = useState('')
  useEffect(()=> {
    const _retrieveData = async () => {
    try {
      const value = await AsyncStorage.getItem("@MySuperStore:key");
      if (value !== null) {
        console.info("we have data:", value)
        setSavedData(value)
      }
    } catch (error) {
      console.info('error2', error)
    }
    }
    _retrieveData();
  },[])
 

  const LoadFonts = async () => {
    await useFonts();
  };

  if (!IsReady) {
    return (
      <AppLoading
        startAsync = {LoadFonts}
        onFinish = {() => SetIsReady(true)}
        onError = {() => {}}
      />
    );
  }
  return (
    <View style = {styles.container}>

          <Text>            
            {savedData}
          </Text>
    </View>
  );
}

const styles = StyleSheet.create({
  container:{
    flex:1, 
    alignItems:"center",
    justifyContent:"center",
  },
})

закуска.expo.dev/@jurajbe/appasyncstorage

JurajB 23.01.2023 15:56

Спасибо, snaxk.expo.dev действительно помог мне понять, в чем проблема! Надеюсь, мой ответ поможет!

Mister_CK 23.01.2023 20:50

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