Własny punkt zaczepienia useAsyncStorage z zaczepem useState w React Native
Jak wiemy, w React Native nie możemy używać LocalStorage. Zamiast tego próbuję utworzyć niestandardowy hak useAsyncStorage, który wykonuje tę samą funkcję, co hak klienta klienta LocalStorage, reagując na przechowywanie danych w lokalnej pamięci urządzenia mobilnego.
useAsyncStorage.js
import React, { useEffect, useState } from 'react';
import AsyncStorage from '@react-native-community/async-storage';
export default function useAsyncStorage(key, defaultValue) {
const [storageValue, updateStorageValue] = useState(defaultValue);
useEffect(() => {
getStorageValue();
}, []);
async function getStorageValue() {
let value = defaultValue;
try {
value = (JSON.parse(await AsyncStorage.getItem(key))) || defaultValue;
} catch (e) {
// handle here
} finally {
updateStorage(value);
}
}
async function updateStorage(newValue) {
try {
await AsyncStorage.setItem(key, JSON.stringify(newValue));
} catch (e) {
// handle here
} finally {
getStorageValue();
}
}
return [storageValue, updateStorageValue];
}
W App.js importuję useAsyncStorage.js i próbuję używać go do przechowywania danych w lokalnej pamięci urządzenia mobilnego.
import useAsyncStorage from './useAsyncStorage';
Aby ją parafować:
const [userLevel, setUserLevel] = useAsyncStorage("userLevel",1)
Aby ustawić wartość:
setUserLevel(prevLevel => {
return prevLevel + 1
})
Działa zgodnie z oczekiwaniami i ustawia dane, ale nie może pobrać danych z AsyncStorage po ponownym załadowaniu aplikacji.
Czy ktoś mógłby pomóc? Czy zrobiłem coś złego w niestandardowym zaczepie useAsyncStorage? Dlaczego dane nie są przechowywane w AsyncStorage?
Odpowiedzi
Ta useAsyncStorage
implementacja działa dla mnie.
function useAsyncStorage(key, initialValue) {
const [storedValue, setStoredValue] = useState();
async function getStoredItem(key, initialValue) {
try {
const item = await AsyncStorage.getItem(key);
const value = item ? JSON.parse(item) : initialValue;
setStoredValue(value);
} catch (error) {
console.log(error);
}
}
useEffect(() => {
getStoredItem(key, initialValue);
}, [key, initialValue]);
const setValue = async (value) => {
try {
const valueToStore =
value instanceof Function ? value(storedValue) : value;
setStoredValue(valueToStore);
await AsyncStorage.setItem(key, JSON.stringify(valueToStore));
} catch (error) {
console.log(error);
}
};
return [storedValue, setValue];
}
Link do demo Snack:
https://snack.expo.io/@yajana/useasyncstorage
Odniesienie:
https://usehooks.com/useLocalStorage/
Inne podobne wdrożenia:
https://github.com/react-native-hooks/async-storage/blob/master/src/index.js
Możesz wypróbować ten niestandardowy haczyk, który zrobiłem
import { useEffect, useState } from 'react'
import AsyncStorage from '@react-native-async-storage/async-storage'
const useAsyncStorage = (key, initialValue) => {
const [data, setData] = useState(initialValue)
const [retrivedFromStorage, setRetrievedFromStorage] = useState(false)
useEffect(() => {
;(async () => {
try {
const value = await AsyncStorage.getItem(key)
setData(JSON.parse(value) || initialValue)
setRetrievedFromStorage(true)
} catch (error) {
console.error('useAsyncStorage getItem error:', error)
}
})()
}, [key, initialValue])
const setNewData = async (value) => {
try {
await AsyncStorage.setItem(key, JSON.stringify(value))
setData(value)
} catch (error) {
console.error('useAsyncStorage setItem error:', error)
}
}
return [data, setNewData, retrivedFromStorage]
}
export default useAsyncStorage
możesz również użyć retrievedFromStorage, aby sprawdzić, czy dane zostały pomyślnie pobrane z AsyncStorage.
Odkryłem, że ten działa dla mnie.
import { useEffect, useState } from 'react';
import AsyncStorage from '@react-native-community/async-storage';
export default function useAsyncStorage(key, initialValue) {
const [storedValue, setStoredValue] = useState(initialValue);
useEffect(() => {
AsyncStorage.getItem(key)
.then(value => {
if (value === null) return initialValue;
return JSON.parse(value);
})
.then(setStoredValue)
}, [key, initialValue]);
const setValue = value => {
const valueToStore = value instanceof Function ? value(storedValue) : value;
setStoredValue(valueToStore);
AsyncStorage.setItem(key, JSON.stringify(valueToStore));
}
return [storedValue, setValue];
}
Odniesienie: https://gist.github.com/msukmanowsky/08a3650223dda8b102d2c9fe94ad5c12