我的 localstorage.getItem 有問題，setItem 函式作業正常并且資料存盤正確，但是當我重繪 頁面時資料消失了。這是我的代碼
useEffect(()=>{
localStorage.setItem(local_Storage_key, JSON.stringify(contacts));
}, [contacts]);
useEffect(()=>{
const storage = JSON.parse(localStorage.getItem(local_Storage_key));
if (storage) {setContacts(storage);}
}, []);
在我重繪 頁面之前本地存盤的圖片
uj5u.com熱心網友回復：
我認為這是因為您的以下代碼是在安裝組件后執行的。
useEffect(()=>{
localStorage.setItem(local_Storage_key, JSON.stringify(contacts));
}, [contacts]);
正因為如此，它再次將聯系人的初始值設定為 localStorage。為避免這種情況，您可以將聯系人的初始值設定為您從 localStorage 獲得的值
const [contacts,setContacts] = useState(JSON.parse(localStorage.getItem(local_Storage_key)));
useEffect(()=>{
localStorage.setItem(local_Storage_key, JSON.stringify(contacts));
}, [contacts]);
// remove another useEffect
uj5u.com熱心網友回復：
我建議你使用useLocalStorage
import { useLocalStorage } from 'react-use';
const Demo = () => {
const [value, setValue, remove] = useLocalStorage('my-key', 'foo');
return (
<div>
<div>Value: {value}</div>
<button onClick={() => setValue('bar')}>bar</button>
<button onClick={() => setValue('baz')}>baz</button>
<button onClick={() => remove()}>Remove</button>
</div>
);
};
轉載請註明出處，本文鏈接：https://www.uj5u.com/net/489731.html
標籤：javascript 反应 本地存储
上一篇：未提供打字稿引數