hook kustom useAsyncStorage dengan hook useState di React Native

Question

Seperti yang kita ketahui, kita tidak bisa menggunakan LocalStorage di React Native. Saya mencoba untuk membuat hook kustom useAsyncStorage sebagai gantinya, yang melakukan fungsi yang sama seperti hook custome LocalStorage dalam bereaksi untuk menyimpan data di penyimpanan lokal perangkat seluler.

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];
}

Di App.js saya mengimpor useAsyncStorage.js dan mencoba menggunakannya untuk menyimpan data di penyimpanan lokal perangkat seluler.

import useAsyncStorage from './useAsyncStorage';

Untuk memulainya:

const [userLevel, setUserLevel] = useAsyncStorage("userLevel",1)

Untuk setValue:

 setUserLevel(prevLevel => {
   return prevLevel + 1
 })

Ini berfungsi seperti yang diharapkan dan menyetel datanya, tetapi tidak dapat mengambil data dari AsyncStorage setelah aplikasi dimuat ulang.

Adakah yang bisa membantu? Apakah saya melakukan kesalahan dalam pengait khusus useAsyncStorage? Mengapa data tidak disimpan di AsyncStorage?

Answer 1

Ini useAsyncStorageimplementasi bekerja untuk saya.

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];
}

Tautan ke demo Snack:

https://snack.expo.io/@yajana/useasyncstorage

Referensi:

https://usehooks.com/useLocalStorage/

Implementasi serupa lainnya:

https://github.com/react-native-hooks/async-storage/blob/master/src/index.js

Answer 2

Anda bisa mencoba pengait custom yang saya buat ini

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

Anda juga dapat menggunakan retvedFromStorage untuk memeriksa apakah data berhasil diambil dari AsyncStorage.

Answer 3

Saya menemukan yang ini bekerja untuk saya.

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];
}

Referensi: https://gist.github.com/msukmanowsky/08a3650223dda8b102d2c9fe94ad5c12