从React本机异步存储检索数据并呈现

wlp8pajw  于 2023-01-31  发布在  React
关注(0)|答案(1)|浏览(125)

我有以下问题:

_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) {}
};

我应该如何呈现数据?我在react-native Text元素中使用_retrieveData(),系统显示以下消息:

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.
yhived7q

yhived7q1#

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.log("We have data!!", value)
      return value;
    }
  } catch (error) {}
};

我相信,您遇到的渲染错误通常是由于试图渲染一个对象,其中它应该是一个数组,如@Michael Bahl所说,或一个字符串,您可能需要使用{}来解构数据。
更新:我试了一下,发现有几个问题需要解决。最重要的是,你不应该只是调用一个函数,然后在React Native中呈现它的返回值。你应该使用useState来管理它。例如,使用useEffect来更新它。试了一下之后,我认为它可以像你预期的那样工作,下面是代码。如果你对此有任何疑问,请告诉我:

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.log('data saved')
  } catch (error) {
    console.log('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.log("we have data:", value)
        setSavedData(value)
      }
    } catch (error) {
      console.log('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",
  },
})

相关问题