У меня есть эти вопросы:
_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.
Покажите, где вы визуализируете значение, полученное из асинхронного хранилища. Вы пытаетесь отобразить объект javascript {}
, но это должен быть массив []
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
Спасибо, snaxk.expo.dev действительно помог мне понять, в чем проблема! Надеюсь, мой ответ поможет!
Можете ли вы поделиться своим полным компонентом? Куда вы звонили
_storeData
и_retrieveData
?