useAsyncStorage เบ็ดแบบกำหนดเองพร้อมด้วย useState hook ใน React Native
ดังที่เราทราบเราไม่สามารถใช้ LocalStorage ใน React Native ได้ ฉันพยายามสร้าง hook แบบกำหนดเอง useAsyncStorage แทนซึ่งทำหน้าที่เดียวกับ LocalStorage custome hook ในการตอบสนองเพื่อจัดเก็บข้อมูลในที่จัดเก็บข้อมูลในเครื่องของอุปกรณ์มือถือ
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];
}
ใน App.js ฉันนำเข้า useAsyncStorage.js และลองใช้เพื่อจัดเก็บข้อมูลในที่จัดเก็บข้อมูลภายในของอุปกรณ์เคลื่อนที่
import useAsyncStorage from './useAsyncStorage';
ในการเริ่มต้น:
const [userLevel, setUserLevel] = useAsyncStorage("userLevel",1)
เพื่อ setValue:
setUserLevel(prevLevel => {
return prevLevel + 1
})
ทำงานตามที่คาดไว้และตั้งค่าข้อมูล แต่ไม่สามารถดึงข้อมูลจาก AsyncStorage ได้หลังจากโหลดแอปซ้ำ
ใครช่วยได้บ้าง ฉันทำอะไรผิดพลาดในการใช้งานตะขอที่กำหนดเอง AsyncStorage หรือไม่? เหตุใดข้อมูลจึงไม่จัดเก็บใน AsyncStorage
คำตอบ
useAsyncStorage
การใช้งานนี้ใช้ได้ผลสำหรับฉัน
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];
}
ลิงก์ไปยังสาธิตสแน็ค:
https://snack.expo.io/@yajana/useasyncstorage
อ้างอิง:
https://usehooks.com/useLocalStorage/
การใช้งานอื่น ๆ ที่คล้ายกัน:
https://github.com/react-native-hooks/async-storage/blob/master/src/index.js
คุณสามารถลองเบ็ดแบบกำหนดเองที่ฉันทำขึ้น
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
คุณยังสามารถใช้ retrievedFromStorage เพื่อตรวจสอบว่าดึงข้อมูลจาก AsyncStorage สำเร็จหรือไม่
ฉันพบว่าอันนี้เหมาะกับฉัน
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];
}
อ้างอิง: https://gist.github.com/msukmanowsky/08a3650223dda8b102d2c9fe94ad5c12