我正在創建一個使用本地存盤的反應應用程式。我正在將物件陣列保存到本地存盤。
當我嘗試保存到本地存盤時，資料正在保存。然后當我重繪 頁面時，保存的資料變成了空物件，就像這個 []。
如果有人知道為什么會發生，請幫助我
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>
);
}
應用組件
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
匯出默認應用程式；
添加組件
這是重繪 后保存時顯示的值此值變為空物件
在此處輸入影像描述
控制臺 在此處輸入影像描述
uj5u.com熱心網友回復：
您不需要useEffect讀取資料。您可以初步閱讀它。
const [contacts, setcontacts] = useState(JSON.parse(localStorage.getItem(keyy)) ?? [])
并洗掉
useEffect(() => {
const getdata = JSON.parse(localStorage.getItem(keyy))
getdata && setcontacts(getdata)
}, [])
轉載請註明出處，本文鏈接：https://www.uj5u.com/qukuanlian/466514.html