Question 206125 in React native Question posted in
The official React Native documentation can be found here.

React native – Custom useAsyncStorage Hook Error: Passing null/undefined as value is not supported

this is my first time trying a custom AsyncStorage Hook for a project, but I keep getting this LOG Error: Error: [AsyncStorage] Passing null/undefined as value is not supported. If you want to remove value, Use .removeItem method instead.
Passed value: undefined
Passed key: budgets
] This Hook is meant to store the budgets and expenses in my context file
The AsyncStorage Hooks are:

import { useEffect, useState } from 'react';
import AsyncStorage from '@react-native-async-storage/async-storage';

const useAsyncStorage = (key, defaultValue) => {
  const [storedValue, setStoredValue] = useState(null);

  useEffect(() => {
    async function getStoredValue() {
      try {
        const value = await AsyncStorage.getItem(key);
        if (value !== null) {
          setStoredValue(value);
        } else if (defaultValue !== undefined) {
          setStoredValue(defaultValue);
        } else if (typeof defaultValue === 'function') {
          setStoredValue(defaultValue());
        }
      } catch (e) {
        console.log(`Error getting ${key} from AsyncStorage`, e);
      }
    }

    getStoredValue();
  }, [key]);

  const setValue = async (value) => {
    try {
      await AsyncStorage.setItem(key, value);
      setStoredValue(value);
    } catch (e) {
      console.log(`Error setting ${key} in AsyncStorage`, e);
    }
  };

  return [storedValue, setValue];
};

export default useAsyncStorage;

This is where it’s used:

 const [budgets, setBudgets] = useAsyncStorage("budgets",[]);
  const [expenses, setExpenses] = useAsyncStorage("expenses",[]);

I would appreciate the help thanks. Please if the code isn’t clear or I need to provide more details let me know

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    Not to worry, I've solved it. I had an error in my useAsyncStorage hook just had to change the hook to this:

    import { useState, useEffect } from "react";
import AsyncStorage from "@react-native-async-storage/async-storage";

export default function useAsyncStorage(key, defaultValue) {
  const [value, setValue] = useState(defaultValue);

  useEffect(() => {
    AsyncStorage.getItem(key).then(jsonValue => {
      if (jsonValue != null) {
        setValue(JSON.parse(jsonValue));
      } else if (typeof defaultValue === "function") {
        setValue(defaultValue());
      }
    });
  }, [key]);

  useEffect(() => {
    AsyncStorage.setItem(key, JSON.stringify(value));
  }, [key, value]);

  return [value, setValue];
}

  2. 0 
    import{ useAsyncStorage } from '@react-native-async-storage/async-storage';

async function rr()
{
 let result =  await useAsyncStorage("key").getItem();
}
 
Note: useAsyncStorage("key"), Returns an object, Containing many pre-built functions.
getItem() function, returns value of the key, Stored in AsyncStorage
Therefore we need to use await keyword.

This info is off topic, But i feel like to share it
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search