本机本地数据备份
本机本地数据备份
提问于 2021-09-27 10:26:33
我在训练反应本地人。我想弄清楚如何在本地保存数据。
我有一个待办事项清单，并选择分配给这个任务的人.
例如，我希望保存添加的任务，以便在停止并重新启动应用程序时保留这些任务。我正在考虑使用异步存储，所以我这样做了：
const storeData =异步(任务) => {尝试{等待AsyncStorage.setItem('key'，任务)} catch (e) { // lance une }}
但它似乎不起作用。
这是我为这个页面编写的所有代码。你能帮我把我的代码工作，并向我解释的行为，在这个过程中的功能？
谢谢。
import React, {useState} from 'react';
import { KeyboardAvoidingView, Text, View, TextInput, TouchableOpacity, Keyboard, ScrollView } from 'react-native';
import Task from '../../Task';
import SelectDropdown from 'react-native-select-dropdown'
import styles from "../../../assets/styles"
export default function Trucs() {
const [task, setTask] = useState();
const [taskItems, setTaskItems] = useState([]);
const users = ["Jibé", "Charly"]
const handleAddTask = () => {
Keyboard.dismiss();
setTaskItems([...taskItems, task])
setTask(null);
}
const storeData = async (task) => {
try {
await AsyncStorage.setItem('key', task)
} catch (e) {
// lance une erreur
}
}
const completeTask = (index) => {
let itemsCopy = [...taskItems];
itemsCopy.splice(index, 1);
setTaskItems(itemsCopy)
storeData(task)
}
return (
<View style={styles.wrap}>
{/* Added this scroll view to enable scrolling when list gets longer than the page */}
<ScrollView
contentContainerStyle={{
flexGrow: 1
}}
keyboardShouldPersistTaps='handled'
>
{/* Today's Tasks */}
<View style={styles.tasksWrapper}>
<Text style={styles.sectionTitle}>Trucs à faire</Text>
{/* This is where the tasks will go! */}
{
taskItems.map((item, index) => {
return (
<TouchableOpacity key={index} onPress={() => completeTask(index)}>
<View>
<Task text={item}/>
<SelectDropdown
data={users}
onSelect={(selectedItem, index) => {
console.log(selectedItem, index)
}}
buttonTextAfterSelection={(selectedItem, index) => {
// text represented after item is selected
// if data array is an array of objects then return selectedItem.property to render after item is selected
return selectedItem
}}
rowTextForSelection={(item, index) => {
// text represented for each item in dropdown
// if data array is an array of objects then return item.property to represent item in dropdown
return item
}}/>
</View>
</TouchableOpacity>
)
})
}
</View>
</ScrollView>
{/* Write a task */}
{/* Uses a keyboard avoiding view which ensures the keyboard does not cover the items on screen */}
<KeyboardAvoidingView
// behavior={Platform.OS === "ios" ? "padding" : "height"}
style={styles.writeTaskWrapper}
>
<TextInput style={styles.input} placeholder={'Rajouter un truc à faire'} value={task} onChangeText={text => setTask(text)} />
<TouchableOpacity onPress={() => handleAddTask()}>
<View style={styles.addWrapper}>
<Text style={styles.addText}>+</Text>
</View>
</TouchableOpacity>
</KeyboardAvoidingView>
</View>
);
}回答 2
Stack Overflow用户
发布于 2021-09-27 10:55:12
我觉得您没有正确地获取存储在AsyncStorage中的数据。看看我的两个按键存储和检索数据的函数。
const storeData = async (key, value) => {
try {
await AsyncStorage.setItem(key, value);
} catch (error) {
console.log(error);
}
};
const getData = async (key) => {
try {
const data = await AsyncStorage.getItem(key);
if (data !== null) {
console.log(data);
return data;
}
} catch (error) {
console.log(error);
}
};然后，您可以在想要获取存储元素的地方调用getData("yourKey")。
Stack Overflow用户
发布于 2021-09-27 11:01:17
这里有几点：
1- AsyncStorage.setItem()接受同时是字符串的键和值。所以您需要在您的await AsyncStorage.setItem('key', JSON.stringify(task))方法中执行storeData
2-您需要在组件挂载后读取数据，并使用类似于useEffect的方法将其放入状态，以便在重新启动应用程序后显示数据。例如：
useEffect(() => {
AsyncStorage.getItem('key').then((res) => {
setTask(JSON.parse(res));
})
} , [])页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/69345056
复制相关文章
相似问题
腾讯云开发者
