“Verwenden Sie Lokalstorage React Hook” Code-Antworten

Verwenden Sie Lokalstorage -Haken

import { useCallback, useEffect, useState } from "react";

export const useLocalStorage = (key, initialValue) => {
  const initialize = (key) => {
    try {
      const item = localStorage.getItem(key);
      if (item && item !== "undefined") {
        return JSON.parse(item);
      }

      localStorage.setItem(key, JSON.stringify(initialValue));
      return initialValue;
    } catch {
      return initialValue;
    }
  };

  const [state, setState] = useState(null); // problem is here

  // solution is here....
  useEffect(()=>{
    setState(initialize(key));
  },[]);

  const setValue = useCallback(
    (value) => {
      try {
        const valueToStore = value instanceof Function ? value(storedValue) : value;
        setState(valueToStore);
        localStorage.setItem(key, JSON.stringify(valueToStore));
      } catch (error) {
        console.log(error);
      }
    },
    [key, setState]
  );

  const remove = useCallback(() => {
    try {
      localStorage.removeItem(key);
    } catch {
      console.log(error);
    }
  }, [key]);

  return [state, setValue, remove];
};
Encouraging Echidna

Verwenden Sie Lokalstorage React Hook

  const [name, setName] = useLocalStorage("name", "Bob");
Busy Bee

Ähnliche Antworten wie “Verwenden Sie Lokalstorage React Hook”

Fragen ähnlich wie “Verwenden Sie Lokalstorage React Hook”

Weitere verwandte Antworten zu “Verwenden Sie Lokalstorage React Hook” auf JavaScript

Durchsuchen Sie beliebte Code-Antworten nach Sprache

Durchsuchen Sie andere Codesprachen