从react原生异步存储检索数据并呈现它

Question

我有这些问题:

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

Answer 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.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",
},
})