Estoy creando una aplicación de reacción que usa almacenamiento local. Estoy guardando una matriz de objetos en el almacenamiento local.

cuando trato de guardar en el almacenamiento local, los datos se guardan. y luego, cuando actualizo la página, los datos guardados se convierten en objetos vacíos, como este [].

si alguien sabe por que sucede por favor ayudenme

 import React, {useEffect, useState} from 'react'; import Addcontact from './Addcontact'; import './App.css'; import Contactlist from './Contactlist'; import { Header } from './Header'; function App() { const keyy ="contactlist" const [contacts, setcontacts] = useState([]) const contactshandler = (contact)=> { console.log(contact) setcontacts([...contacts, contact]) } useEffect(() => { const getdata = JSON.parse(localStorage.getItem(keyy)) getdata && setcontacts(getdata) }, []) useEffect(() => { localStorage.setItem(keyy, JSON.stringify(contacts)); }, [contacts]) return ( <div className="ui container"> <Header /> <Addcontact contacts={contacts} contactshandler={contactshandler} /> <Contactlist contacts={contacts} /> </div> ); }

componente de la aplicación

 import React, { useState } from 'react' function Addcontact({contacts, setcontacts, contactshandler}) { const [user, setuser] = useState({username:'', email:''}) const addvalue = (e) => { e.preventDefault(); console.log(user) contactshandler(user) setuser({username:'', email:''}) } return ( <div> <div className='ui main'> <h2> Add Contact</h2> <form className='ui form' onSubmit={addvalue}> <div className=''> <label>name</label> <input name="name" placeholder='name' value={user.username} onChange={(e) => setuser({...user, username : e.target.value })} /> </div> <div className='feild'> <label>email</label> <input email='email' placeholder='email' value={user.email} onChange={(e) => setuser({...user, email: e.target.value})} /> </div> <button>add</button> </form> </div> </div> ) } export default Addcontact

exportar la aplicación predeterminada;

agregar componente

este es el valor que se muestra al guardar después de actualizar este valor se convierte en un objeto vacío

ingrese la descripción de la imagen aquí

consola ingrese la descripción de la imagen aquí