Estoy usando el siguiente código para crear una lista simple de tareas pendientes. Todo funciona bien, excepto los componentes de almacenamiento asíncrono, ya que las tareas no se guardan o no se recuperan. ¿Alguien podría indicarme alguna modificación que pueda hacer en useEffect s para solucionar este problema?
/* 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 entered\nPlease 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; El problema es causado por el useEffect a continuación. Guarda tasks en el almacenamiento cada vez tasks cambian, pero también en el primer renderizado donde tasks es igual a [] , el valor dado a useState .
useEffect(() => { const saveTasks = async () => { await AsyncStorage.setItem('TASKS', JSON.stringify(tasks)); } saveTasks(); }, [tasks]); Una manera fácil de resolver este problema es eliminar el useEffect anterior y cambiar addTask y removeTask de la siguiente manera:
const addTask = (text) => { if (!text) { Alert.alert(null,'No task entered\nPlease 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); };