Estoy llamando a una función al presionar un botón, para almacenar mis datos en el almacenamiento local usando AsyncStorage
.
A continuación se muestra mi código para almacenar datos usando AsyncStorage
const [saveData, setSaveData] = useState([]); const _submit = async (text, photo) => { let newItem; newItem = { description: text, imageURL: photo, }; setSaveData(prevList => { prevList = prevList || []; if (prevList.length < 0) { return newItem; } else { return [...prevList, newItem]; } }); setLocalItem(); }; const setLocalItem = async () => { AsyncStorage.setItem('test2', JSON.stringify(saveData)) .then(json => console.log('success!')) .catch(error => console.log('error!')); }; const getLocalItem = async () => { try { const jsonValue = await AsyncStorage.getItem('test2'); const list = JSON.parse(jsonValue); console.log('list: ', list); } catch (e) { console.log('error: ', e); } }; <TouchableOpacity onPress={() => { _submit (text, photo); }}> <Text>save</Text> </TouchableOpacity> <TouchableOpacity onPress={() => { getLocalItem(); }}> <Text>get item</Text> </TouchableOpacity>
Mis datos se almacenan, pero solo después de hacer clic en el botón save
varias veces. Pero en la consola tengo success
incluso cuando hago clic en el botón save
solo una vez. Pero cuando hago clic en el botón get item
, obtengo un null
en la consola si se hace clic en save
solo una vez.
No estoy seguro de por qué tengo que hacer clic en save
varias veces para almacenar mis datos.
Estás actualizando el estado incorrectamente. Y el nuevo estado estará disponible en el próximo renderizado, por lo que se debe llamar a setLocalItem
después de que se actualice el estado.
const [saveData, setSaveData] = useState([]); // this effect updates the storage whenever `saveData` changes useEffect(() => { AsyncStorage.setItem('test2', JSON.stringify(saveData)) .then(json => console.log('success!')) .catch(error => console.log('error!')); }, [saveData]) const _submit = (text, photo) => { const newItem = { description: text, imageURL: photo, }; // no conditions are required here as the initial state is an array setSaveData(prevList => [...prevList, newItem]); }; const getLocalItem = async () => { try { const jsonValue = await AsyncStorage.getItem('test2'); const list = JSON.parse(jsonValue); console.log('list: ', list); } catch (e) { console.log('error: ', e); } };