React Native，不能用async-storage正确地存储和获取数据

Question

我使用下面的代码创建一个简单的待办事项列表。除了异步存储组件之外，一切都很好，因为任务要么没有被保存，要么没有被提取。谁能指出我可以对useEffects做什么修改来解决这个问题?

/* eslint-disable prettier/prettier */
import React, {useState, useEffect} from 'react';
import {View, StyleSheet, FlatList, Alert} from 'react-native';
import AsyncStorage from '@react-native-async-storage/async-storage';
import uuid from 'react-native-uuid';
import Header from './components/header.js';
import Task from './components/task.js';
import Add from './components/add.js';
const App = () => {
const [tasks, setTasks] = useState([]);
const addTask = (text) => {
if (!text) {
Alert.alert(null,'No task enterednPlease enter a task',);
} else {
setTasks(prevState => {
return [...prevState, {id: uuid.v4(), title: text}];
});
}
};
const removeTask = (id) => {
setTasks(prevState =>{
return prevState.filter(task => task.id!=id);
}); 
};
useEffect(() => {
const saveTasks = async () => {
await AsyncStorage.setItem('TASKS', JSON.stringify(tasks));
}
saveTasks();
}, [tasks]);
useEffect(() => {
const fetchTasks = async () =>{
const saved = await AsyncStorage.getItem('TASKS');
setTasks(JSON.parse(saved));
}
fetchTasks();
}, []);
return (
<View style={styles.container}>
<Header/>
<Add addTask={addTask} />
<FlatList
data={tasks}
renderItem={({ item }) => <Task text={item.title} removeTask={removeTask} id={item.id}/>}
keyExtractor={task => task.id}
/>
</View>
);
};
const styles = StyleSheet.create({
container: {
flex: 1,
},
});
export default App;

Answer 1

问题

问题是由以下useEffect引起的。每次tasks变化时，它都会在存储中保存tasks，但在第一次渲染时，tasks等于[]，即useState的值。

useEffect(() => {
const saveTasks = async () => {
await AsyncStorage.setItem('TASKS', JSON.stringify(tasks));
}
saveTasks();
}, [tasks]);

<标题>

解决方案解决这个问题的一个简单方法是删除上面的useEffect，并更改addTask和removeTask如下:

const addTask = (text) => {
if (!text) {
Alert.alert(null,'No task enterednPlease enter a task',);
} else {
const newTasks = [...tasks, {id: uuid.v4(), title: text}];
await AsyncStorage.setItem('TASKS', JSON.stringify(newTasks));
setTasks(newTasks);
}
};

const removeTask = (id) => { 
const newTasks = tasks.filter(task => task.id!=id);
await AsyncStorage.setItem('TASKS', JSON.stringify(newTasks));
setTasks(newTasks); 
};